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近年 来 ， 随 着 网 络 信息 技术 的 广泛 应 用 ， 越 来 越 多 的 个 人 、 企 业 纷 纷 建立 自己 的 网 站 ， 
利用 网 站 来 宣传 和 推广 自己 。 网 页 技术 已 经 成 为 当代 青年 学 生 必 备 的 知识 技能 。 目 前 大 部 
分 制作 网 页 的 方式 都 是 运用 可 视 化 的 网 页 编辑 软件 ， 这 些 软件 的 功能 相当 强大 ， 使 用 也 非 
常 方便 。 但 是 对 于 高 级 的 网 页 制作 人 员 来 讲 ， 仍 需 了 解 HIML、CSS+DIV 等 网 页 设计 语言 
和 技术 的 使 用 ,这 样 才能 充分 发 挥 丰富 的 想象 力 , 更 加 随心 所 欲 地 设计 出 符合 标准 的 网 页 ， 
以 实现 网 页 设计 软件 不 能 完成 的 许多 重要 功能 。 


本 书 主要 内 容 


随 着 Web 2.0 的 盛行 ， 一 切 都 开始 基于 Web 标准 ， 许 多 网 站 设计 师 开 始 学 习 并 应 用 
Web 标准 ，CSS 的 应 用 也 越 来 越 广泛 。 本 书 正 是 在 这 种 流行 趋势 下 应 运 而 生 的 介绍 使 用 
HTML 和 CSS 进行 网 页 标准 化 布局 的 书 。 本 书 不 仅仅 将 笔墨 局 限于 语法 讲解 上 ， 并 通过 一 
个 个 鲜 活 、 典 型 的 实战 来 达到 学 以 致 用 的 目的 。 每 个 语法 都 有 相应 的 实例 ， 每 章 后 面 又 配 
有 综合 小 实例 。 

本 书 共 21 章 ， 主 要 内 容 包 括 HTML 入 门 ，HTML 基本 标签 ， 用 HTML 设置 文字 ， 段 
落 与 列表 ， 列 表 的 建立 和 使 用 ， 用 HTML 创建 精彩 的 图 像 和 多 媒体 页 面 ， 用 HTML 创建 
超 链接 ， 用 HTML 创建 表格 ， 用 表单 创建 交互 式 网 页 ，HTML 5 的 结构 ，CSS 基础 知识 ， 
用 CSS 设计 丰富 的 文字 效果 ， 用 CSS 设计 图 像 和 背景 ， 用 CSS 设计 表格 和 表单 样式 、 用 
CSS 制作 链接 与 网 站 导航 ，CSS+DIV 布局 定位 基础 ，CSS 盒子 模型 ， 盒 子 的 浮动 与 定位 ， 
CSS+DIV 布局 方法 ，CSS 3 入 门 基础 ， 设 计 和 制作 适合 手机 浏览 的 网 页 ， 公 司 宣传 网 站 的 
布局 。 


本 书 主要 特色 


(1) 知识 全 面 系统 。 

本 书 内 容 完 全 从 网 页 创建 的 实际 角度 出 发 ， 将 所 有 HIML、CSS+DIV 元 素 进行 归 类 ， 
每 个 标签 的 语法 、 属 性 和 参数 都 有 完整 、 详 细 的 说 明 ， 信 息 量 大 ， 知 识 结构 完 善 。 

(2) 典型 实例 讲解 。 

本 书 的 每 章 都 配 有 大 量 实用 案例 ， 将 本 章 的 基础 知识 综合 贯穿 起 来 ， 力 求 达到 理论 知 
识 与 实际 操作 完美 结合 的 效果 。 

(3) 配合 Dreamweaver 进行 讲解 。 

本 书 以 浅显 的 语言 和 详细 的 步 又 介绍 了 在 可 视 化 网 页 设计 软件 Dreamweaver 中 如 何 运 
用 HTML、CSS 来 创建 网 页 ， 使 网 页 制作 更 加 得 心 应 手 。 在 最 后 一 章 向 读者 展示 了 完全 不 
用 编写 代码 ， 在 Dreamweaver 中 创建 完整 网 页 的 过 程 。 
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(4) 配 图 丰富 ， 效 果 直观 。 
对 于 每 一 段 实例 代码 ， 本 书 都 配 有 相应 的 效果 图 ， 读 者 无 须 自己 进行 编码 ， 也 可 以 看 


到 相应 的 运行 结果 或 者 显示 效果 。 在 不 便 上 机 操作 的 情况 下 ， 读 者 也 可 以 根据 书 中 的 实例 
和 效果 图 进行 分 析 和 比较 。 


(5) 习题 强化 。 

每 章 后 都 附 有 针对 性 的 练习 题 ， 通 过 实 训 巩固 每 章 所 学 的 知识 。 
(6) 配套 光盘 。 

需要 从 清华 大 学 出 版 社 官网 上 下 载 使 用 。 

本 书 读者 对 象 


网 页 设计 与 制作 人 员 ; 

站 建设 与 开发 人 员 ; 

中 专 院 校 相关 专业 师 生 ; 

页 制作 培训 班 学 员 ; 

个 人 网 站 爱好 者 与 自学 读者 。 

本 书 是 集体 智慧 的 结晶 ， 参 加 本 书 编写 的 人 员 均 为 从 事 网 页 教学 工作 的 资深 教师 和 具 
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习 寺 加 


备 大 型 商业 网 站 建设 经 验 的 资深 网 页 设计 师 ， 他 们 有 着 丰富 的 教学 经 验 和 网 页 设计 经 验 。 
参加 本 书 编写 的 人 员 包 括 徐 洪峰 、 何 琛 、 邓 静 静 、 李 银 修 、 孙 鲁 杰 、 何 海 霞 、 何 秀明 、 和 孙 
素 华 、 吕 志 彬 等 。 由 于 时 间 所 限 ， 书 中 政 漏 之 处 在 所 难免 ， 奶 请 广大 读者 朋友 批评 指正 。 
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第 1 章 HTML 入 门 


【学 习 目 标 】 

在 制作 网 页 时 ， 我 们 大 都 采用 一 些 专门 的 网 页 编辑 工具 ， 如 FrontPage、Dreamweaver 
等 。 这 些 工具 都 是 所 见 即 所 得 ， 使 用 非常 方便 。 使 用 这 些 编辑 工具 制作 网 页 可 以 不 用 编写 
代码 。 在 不 熟悉 HTML 语言 的 情况 下 ， 照 样 可 以 制作 网 页 。 这 是 网 页 编辑 软件 的 最 大 成 功 
之 处 ， 但 也 是 它们 的 最 大 不 足 之 处 一 受 软件 自身 的 约束 ， 将 产生 一 些 垃圾 代码 ， 这 些 垃 
圾 代码 将 会 增 大 网 页 体积 ， 降 低 网 页 的 下 载 速 度 。 一 个 优秀 的 网 页 设计 者 应 在 掌握 可 视 化 
网 页 编辑 工具 的 基础 上 ， 进 一 步 熟悉 HTML 语言 ， 以 便 清除 那些 垃圾 代码 ， 从 而 达到 快速 
制作 高 质量 网 页 的 目的 。 这 就 需要 对 HTML 有 个 基本 的 了 解 ， 因 此 具备 一 定 的 HTML 语 
言 的 基本 知识 是 必要 的 。 

本 章 主要 内 容 包括 : 

(1) 了 解 HTML 的 基本 概念 ; 

(2) 掌握 HTML 文件 的 基本 结构 ; 

(3) 掌握 HTML 文件 编写 方法 ; 

(4) 熟悉 网 页 设计 与 开发 的 过 程 。 


1.1 什么 是 HTML 


上 网 冲浪 ( 即 浏览 网 页 ) 时 ， 呈 现在 人 们 面前 的 一 个 个 漂亮 的 页 面 就 是 网 页 ， 是 网 络 内 
容 的 视觉 呈现 。 网 页 是 怎样 制作 的 呢 ? 其 实 网 页 的 主体 是 一 个 用 HTML 代码 创建 的 文本 文 
件 ， 使 用 HTML 中 的 相应 标签 ， 就 可 以 将 文本 、 图 像 、 动 画 及 音乐 等 内 容 包含 在 网 页 中 ， 
再 通过 浏览 器 的 解析 ， 多 姿 多 彩 的 网 页 内 容 就 呈现 出 来 了 。 

HTML 的 英文 全 称 是 Hyper Text Markup Language, 中 文通 常 称 作 超 文本 标记 语言 或 超 
文本 标签 语言 HTML 是 Internet 上 用 于 编写 网 页 的 主要 语言 ， 它 提供 了 精简 而 有 力 的 文 
件 定义 ， 可 以 设计 出 丰富 的 超 媒体 文件 ， 通 过 HTTP 通信 协议 ，HTML 文件 可 以 在 全 球 互 
联网 (World Wide Web) 上 进行 跨 平 台 的 文件 交换 。 


1.1.1 HTML 的 特点 


HTML 文档 制作 简单 ， 且 功能 强大 ， 支 持 不 同 数据 格式 的 文件 导入 ， 这 也 是 WWW 盛 
行 的 原因 之 一 。HTML 的 主要 特点 如 下 。 
(1) HTML 文档 容易 创建 ， 只 需 一 个 文本 编辑 器 就 可 以 完成 。 
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， (2) HTML 文件 存储 量 小 ， 能 够 尽 可 能 快 地 在 网 络 环境 下 传输 与 显示 。 
， G) 平台 无 关 性 。HTML 独立 于 操作 系统 平台 ， 它 能 够 多 平台 兼容 ， 只 需要 一 个 浏览 
! 器 ， 就 能 够 在 操作 系统 中 浏览 网 页 文件 。 可 以 在 广泛 的 平台 上 使 用 ， 这 也 是 WWW 盛行 的 
! 另 一 个 原因 。 

! (4) 容易 学 习 ， 不 需要 专业 的 编程 知识 。 

1 (5) 可 扩展 性 。HTML 语言 的 广泛 应 用 带 来 了 加 强 功能 、 增 加 标识 符 等 要 求 ，HTML 
1 采取 子 类 元 素 的 方式 ， 为 系统 扩展 带 来 保证 。 

1 

1 

1 

1 

1 


1.1.2 HTML 的 历史 


HTML 1.0: 1993 年 6 月 ， 互 联网 工程 工作 小 组 (IETF) 工作 草案 发 布 。 
HTML 2.0: 1995 年 11 月 发 布 。 

HTML 3.2: 1996 年 1 月 W3C 推荐 标准 。 

HTML 4.0: 1997 年 12 月 W3C 推荐 标准 。 

HTML 4.01: 1999 年 12 月 W3C 推荐 标准 。 

HTML 5: 2014 年 10 月 28 日 W3C 推荐 标准 。 


1.2 ”HTML 文件 的 基本 结构 


编写 HTML 文件 时 ， 必 须 遵 循 一 定 的 语法 规则 。 一 个 完整 的 HIML 文件 由 标题 、 段 
落 、 表 格 和 文本 等 各 种 嵌入 的 对 象 组 成 ， 这 些 对 象 统称 为 元 素 。HTML 使 用 标签 来 分 隔 并 
描述 这 些 元 素 ， 整 个 HTML 文件 其 实 就 是 由 元 素 与 标签 组 成 的 。 


1.2.1 HTML 文件 结构 


HTML 的 任何 标签 都 由 “<” 和 “>” 括 起 来 ， 如 <HITML>。 在 起 始 标签 的 标签 名 前 加 
上 符号 “/” 便 是 其 终止 标签 ， 如 </HTML>， 夹 在 起 始 标 签 和 终止 标签 之 间 的 内 容 受 标签 的 
控制 。 超 文本 文档 分 为 头 和 主体 两 部 分 ， 在 文档 头 部 ， 对 文档 进行 了 一 些 必要 的 定义 ， 文 
档 主体 是 要 显示 的 各 种 文档 信息 。 

基本 语法 : 

<!doctype html> 

<html> 

<head> 网 页 头 部 信息 </head> 


<body> 网 页 主体 正文 部 分 </body> 
</html> 


语法 说 明 ， 
其 中 <!ldoctype html> 在 最 外 层 ， 表 示 这 对 标签 间 的 内 容 是 HIML 文档 。<head> 之 间 包 
括 文档 的 头 部 信息 ， 如 文档 标题 等 ， 若 不 需 头 部 信息 则 可 省 略 此 标签 。<body> 标 签 一 般 不 


BD : 








能 省 略 ， 表 示 正 文 内 容 的 开始 。 


下 面 就 以 一 个 简单 的 HTML 文件 来 熟悉 HIML 文件 的 结构 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> HTML 文件 结构 </title> 
</head> 

<body> 

<p> 第 一 章 ， 第 一 节 简单 的 HTML 文件 结构 ! 
</p> 

</body> 

</html> 


这 一 段 代码 是 由 HTML 中 最 基本 的 几 个 标签 所 组 成 的 ， 运 行 代码 ， 
如 图 1-1 所 示 。 
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图 1-1 HTML 文件 结构 




















下 面 解释 一 下 上 面 的 例子 。 
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在 浏览 器 中 预览 效 


@ HTML 文件 就 是 一 个 文本 文件 。 文 本 文件 的 后 缀 名 是 .txt， 而 HIML 的 后 缀 名 


是 .html。 


HTML 文档 中 , 第 一 个 标签 是 <html>, 该 标签 告诉 浏览 器 这 是 HTML 文档 的 开始 。 
HTML 文档 的 最 后 一 个 标签 是 </html>, 该 标签 告诉 浏览 器 这 是 HTML 文档 的 结尾 。 
在 <head> 和 </head> 标 签 之 间 的 文本 是 头 信息 ,在 浏览 器 窗口 中 ， 头 信息 是 不 被 显 














示 在 页 面 上 的 。 


@ 在 <title> 和 </title> 标 签 之 间 的 文本 是 文档 标题 ， 它 被 显示 在 浏览 器 窗口 的 标题 


栏 中 。 


在 <body> 和 </body> 标 签 之 间 的 文本 是 正文 ， 会 被 显示 在 浏览 器 中 。 


,4 


在 <p> 和 </p> 标 签 之 间 的 文本 是 段落 。 
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1.2.2 ”编写 HTML 文件 的 注意 事项 


HTML 是 由 标签 和 属性 构成 的 ， 在 编写 文件 时 ， 要 注意 以 下 几 点 。 

(1) “<” 和 “>” 是 任何 标签 的 开始 和 结束 。 元 素 的 标签 要 用 这 对 尖 括 号 括 起 来 ， 并 
且 在 结束 标签 的 前 面 加 一 个 “/”( 斜 本 )， 如 <table></table> 。 

(2) 在 源 代码 中 标签 不 区 分 大 小 写 。 

(3) 任何 回 车 和 空格 在 源 代 码 中 均 不 起 作用 。 为 了 代码 的 清晰 ， 建 议 不 同 的 标签 之 间 
用 回 车 进行 换行 。 

(4) 在 HIML 标签 中 可 以 放置 各 种 属性 ， 例 如 : 


<hl align="right">html 入 门 </h1> 


其 中 align 为 <h1> 的 属性 ，right 为 属性 值 ， 元 素 属性 出 现在 元 素 的 人 内， 并且 和 元 素 
名 之 间 有 一 个 空格 分 隔 ， 属 性 值 可 以 直接 书写 ， 也 可 以 使 用 " " 括 起 来 ， 如 下 面 的 两 种 写法 
都 是 正确 的 。 


<hl align="right"> html 入 门 </h1> 
<hl align=right> html 入 门 </h1> 


(5) 要 正确 输入 标签 。 输 入 标签 时 ， 不 要 输入 多 余 的 空格 ， 和 否则 浏览 器 可 能 无 法 识别 
这 个 标签 ， 导 致 不 能 正确 显示 信息 。 

(6) 在 HIML 源 代码 中 注释 格式 是 : <!-- 要 注释 的 内 容 -->， 注 释 语 句 只 出 现在 源 代码 
中 ， 不 会 在 浏览 器 中 显示 。 


1.3 ”HTML 文件 的 编写 方法 


由 于 用 HTML 语言 编写 的 文件 是 标准 的 ASCII 文本 文件 , 因此 可 以 使 用 任意 一 个 文本 
编辑 器 来 打开 并 编写 HTML 文件 ， 例 如 Windows 系统 中 自 带 的 记事 本 。 如 果 使 用 
Dreamweaver、FrontPage 等 软件 ， 则 能 以 可 视 化 的 方式 进行 网 页 的 编辑 制作 等 。 


1.3.1 使 用 记事 本 编写 HTML 页 面 


HTML 是 以 文字 为 基础 的 语言 ， 并 不 需要 什么 特殊 的 开发 环境 ， 可 以 直接 在 Windows 
带 的 记事 本 中 编写 。 HTML 文档 以 .html 为 扩展 名 ， 将 HTML 源 代 码 输入 到 记事 本 中 并 
保存 ， 可 以 在 浏览 器 中 打开 文档 以 查看 显示 效果 。 使 用 记事 本 手工 编写 HIML 页 面 的 具体 
操作 步骤 如 下 。 

(1) 在 Windows 系统 中 ， 打 开 记 事 本 ， 在 记事 本 中 输入 以 下 代码 ， 如 图 1-2 所 示 。 
<!doctype html> 
<html> 


<head> 
<meta charset="utf-8"> 


BD ， 
























































第 1 章 HTML 帮 门 





<title> 无 标题 文档 </title> 

</head> 

<body> 

<img src="1.jpg" width="650" height="563" /> 

</body> 

</html> 

| 刚 说 明 :， 对 于 还 不 知道 怎样 新 建 记事 本 文件 的 读者 ， 可 以 在 电脑 桌面 上 或 者 “我 的 电 

脑 ” 硬 盘 空 白地 方 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 ”一 “ 文 
本 文档 ”命令 。 


(2) 当 编 辑 完 HTML 文件 后 ， 选 择 “ 文 件 ” 一 “另存 为 ”菜单 命令 ， 将 弹出 “另存 为 ” 
对 话 框 ， 将 其 另存 为 扩展 名 为 .htm 或 .html 的 文件 即 可 ， 如 图 1-3 所 示 。 
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图 1-2 在 记事 本 中 输入 代码 图 1-3 保存 文件 


[图 | 说 明 : 注意 是 “另存 为 ”命令 ， 而 不 是 “保存 ”命令 ， 因 为 如 果 选 择 “ 保 存 ” 命 令 
的 话 ，Windows 系统 会 默认 把 它 存 为 .txt 记事 本 文件 。.html 是 扩展 名 ， 注 意 
是 个 点 ， 而 不 是 句号 。 


(3) 单 击 “ 保 存 ” 按 钮 ， 这 时 该 文本 文件 就 变 成 了 HTML 文件 ， 在 浏览 器 中 的 浏览 效 
果 如 图 1-4 所 示 。 














1-4 浏览 网 页 效果 
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1.3.2 使 用 Dreamweaver CC 编写 HTML 页 面 


在 Dreamweaver CC 的 代码 视图 中 可 以 查看 或 编辑 源 代 码 。 为 了 方便 手工 编写 代码 ， 
Dreamweaver CC 增加 了 标签 选择 器 和 标签 编辑 器 。 使 用 标签 选择 器 ， 可 以 在 网 页 代码 中 插 
入 新 的 标签 ;使 用 标签 编辑 器 ， 可 以 对 网 页 代码 中 的 标签 进行 编辑 ， 添 加 标签 的 属性 或 修 
改 属性 值 。 在 Dreamweaver CC 中 编写 代码 的 具体 操作 步骤 如 下 。 

(1) 打开 Dreamweaver CC 软件 ， 新 建 空白 文档 ， 在 代码 视图 中 编写 HIML 代码 ， 如 
图 1-5 所 示 。 
































图 1-5 编写 HTML 代码 
(2) 在 Dreamweaver CC 中 编辑 完 代码 后 ， 返 回 到 设计 视图 中 ， 效 果 如 图 1-6 所 示 。 

















图 1-6 设计 视图 
(3) 选择 “文件 ”一 “保存 ”菜单 命令 ， 保 存 文档 ， 即 可 完成 HTML 文件 的 编写 。 
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1.4 网 页 设计 与 开发 的 过 程 


创建 完整 的 网 站 是 一 个 系统 工程 ， 有 一 定 的 工作 流程 ， 只 有 遵循 这 个 步骤 ， 按 部 就 班 
地 来 ， 才 能 设计 出 令 人 满意 的 网 站 。 因 此 在 设计 网 页 前 ， 先 要 了 解 网 页 设计 与 开发 的 基本 
流程 ， 这 样 才能 制作 出 更 好 、 更 合理 的 网 站 。 


1.4.1 明确 网 站 定位 


在 创建 网 站 时 ， 确 定 站 点 的 目标 是 第 一 步 。 设 计 者 应 清楚 建立 站 点 的 目标 定位 ， 即 确 
定 它 将 提供 什么 样 的 服务 ， 网 页 中 应 该 提供 哪些 内 容 等 。 要 确定 站 点 目标 定位 ， 应 该 从 以 
下 3 个 方面 考虑 。 

(1) 网 站 的 整体 定位 。 网 站 可 以 是 大 型 商用 网 站 、 小 型 电子 商务 网 站 、 门 户 网 站 、 个 
人 主页 、 科 研 网 站 、 交 流 平台 、 公 司 和 企业 介绍 性 网 站 、 服 务 性 网 站 等 。 首 先 应 该 对 网 站 
的 整体 进行 一 个 客观 的 评估 ， 同 时 要 以 发 展 的 眼光 看 待 问题 ， 否 则 将 带 来 许多 升级 和 更 新 
方面 的 不 便 。 

(2) 网 站 的 主要 内 容 。 如 果 是 综合 性 网 站 ， 那 么 对 于 新 闻 、 邮 件 、 电 子 商 务 、 论 坛 等 
都 要 有 所 涉及 ， 这 样 就 要 求 网 页 结构 紧凑 、 美 观 大方 ; 对 于 侧重 某 一 方面 的 网 站 ， 如 书籍 
网 站 、 游 戏 网 站 、 音 乐 网 站 等 ， 则 往往 对 网 页 美工 要 求 较 高 ， 使 用 模板 较 多 ， 更 新 网 页 和 
数据 库 较 快 ， 如 果 是 个 人 主页 或 介绍 性 的 网 站 ， 那 么 一 般 来 讲 ， 网 站 的 更 新 速度 较 慢 ， 浏 
览 率 较 低 ， 并 且 由 于 链接 较 少 ， 内 容 不 如 其 他 网 站 丰富 ， 但 对 美工 的 要 求 更 高 一 些 ， 可 以 
使 用 较 鲜 艳 明亮 的 颜色 ， 同 时 可 以 添加 Flash 动画 等 ， 使 网 页 更 具 动感 和 充满 活力 ， 和 否则 
网 站 没有 吸引 力 。 

(3) 网 站 浏览 者 的 教育 程度 。 对 于 不 同 的 浏览 者 群 ， 网 站 的 吸引 力 是 截然 不 同 的 ， 例 
如 针对 少年 儿童 的 网 站 ， 卡 通 和 科普 性 的 内 容 更 符合 浏览 者 的 品位 ， 也 能 够 达到 网 站 寅 教 

于 乐 的 目的 ， 针 对 学 生 的 网 站 ， 往 往 对 网 站 的 动感 程度 和 特效 技术 要 求 更 高 一 些 ， 对 于 商 
务 浏览 者 ， 网 站 的 安全 性 和 易 用 性 更 为 重要 。 


1.4.2 收集 信息 和 素材 


收集 信息 和 素材 之 前 ， 首 先 要 创建 一 个 新 的 总 目录 (文件 夹 )， 比 如 DD:\ 我 的 网 站 ， 来 放 
置 建立 网 站 的 所 有 文件 , 然后 在 这 个 目录 下 建立 两 个 子 目 录 : “文字 资料 ”和 “图 片 资料 ”。 
放 入 目录 中 的 文件 名 最 好 全 部 用 英文 小 写 ， 因 为 有 些 主机 不 支持 大 写 和 中 文 ， 以 后 增加 的 
内 容 可 再 创建 子 目 录 。 

1. 文本 内 容 素材 的 收集 


具体 的 文本 内 容 是 指 可 以 让 访问 者 清楚 地 明白 作者 的 Web 页 中 想 要 说 明 的 东西 。 我 们 
可 以 从 网 络 、 书 本 、 报 刊 上 找到 需要 的 文字 材料 ， 也 可 以 使 用 平时 的 试卷 和 复习 资料 ， 还 
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可 以 自己 编写 有 关 的 文字 材料 ， 将 这 些 素材 制作 成 Word 文档 保存 在 “文字 资料 ” 子 目录 
下 。 收 集 的 文本 素材 既 要 丰富 ， 又 要 便于 有 机 地 组 织 ， 这 样 才能 做 出 内 容 丰 富 、 整 体感 强 
的 网 页 。 


2. 艺术 内 容 素 材 的 收集 


只 有 文本 内 容 的 网 站 对 于 访问 者 来 讲 ， 是 枯燥 乏味 、 缺 乏 生机 的 。 如 果 加 上 艺术 内 容 
素材 ， 如 静态 图 片 、 动 态 图 像 、 音 乐 、 视 频 等 ， 将 使 网 页 充满 动感 与 生机 ， 也 将 吸引 更 多 
的 访问 者 。 这 些 素材 主要 来 自 于 以 下 4 个 方面 。 

(1) 从 Intemet 上 获取 。 可 以 充分 利用 网 上 的 共享 资源 ， 可 使 用 百度 、 雅 虎 等 引擎 搜 
集 图 片 素材 。 

(2) 从 CD-ROM 中 获取 。 在 市 面 上 ， 有 许多 关于 图 片 素材 库 的 光盘 ， 也 有 许多 教学 软 
件 ， 可 以 选取 其 中 的 图 片 资料 。 

(3) 利用 现成 图 片 或 自己 拍摄 的 图 像 。 既 可 以 从 各 种 图 书 出 版 物 (如 科普 读物 、 教 科 书 、 
杂志 封面 、 摄 影集 等 ) 获 取 图 片 ， 也 可 以 使 用 自己 拍摄 和 积累 的 照片 资料 。 将 杂志 的 封面 彩 
图 用 彩色 扫描 仪 扫描 下 来 ， 经 过 加 工 后 ， 可 以 整合 制作 到 网 页 中 。 

(4) 自己 动手 制作 一 些 特 殊 效 果 的 图 片 ， 特 别 是 动态 图 像 ， 自 己 动手 制作 效果 往往 更 
好 。 可 采用 3ds Max 或 Flash 进行 制作 。 

鉴于 网 上 只 能 支持 几 种 图 片 格式 ， 所 以 可 先 将 通过 以 上 途径 收集 的 图 片 用 Photoshop 
等 图 像 处 理工 具 转换 成 PG、GIF 形式 ， 再 保存 到 “图 片 资料 ” 子 目 录 下 。 另 外 ， 图 片 应 
尽量 精美 而 小 巧 ， 不 要 盲目 追求 大 而 全 ， 要 以 在 网 页 的 美观 与 网 络 的 速度 两 者 之 间 取 得 良 
好 的 平衡 为 宜 。 


1.4.3 ”规划 栏目 结构 


合理 地 组 织 站 点 结构 ， 能 够 加 快 对 站 点 的 设计 ， 节 省 工作 时 间 ， 提 高 工作 效率 。 当 需 
要 创建 一 个 大 型 网 站 时 ， 如 果 将 所 有 网 页 都 存储 在 一 个 目录 下 ， 当 站 点 的 规模 越 来 越 大 时 ， 
管理 起 来 就 会 变 得 很 困难 ， 因 此 合理 地 使 用 文件 夹 管理 文档 就 显得 很 重要 。 

网 站 的 目录 是 指 在 创建 网 站 时 建立 的 目录 ， 要 根据 网 站 的 主题 和 内 容 来 分 类 规划 ， 不 
同 的 栏目 对 应 不 同 的 目录 ， 在 各 个 栏目 目录 下 也 要 根据 内 容 的 不 同 对 其 划分 出 不 同 的 分 目 
录 ， 如 图 片 放 在 images 目录 下 ， 新 闻 放 在 news 目录 下 ， 数 据 库 放 在 database 目录 下 等 ， 
同时 要 注意 目录 的 层次 不 宜 太 深 ， 一 般 不 要 超过 3 层 ， 另 外 给 目录 起 名 的 时 候 要 尽量 使 用 
能 表达 目录 内 容 的 英文 或 汉语 拼音 ， 这 样 会 更 加 方便 日 后 的 管理 和 维护 。 如 图 1-7 所 示 为 
企业 网 站 的 站 点 结构 图 。 
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新 闻 系 统 


企业 荣誉 一 级 分 类 招商 代理 留言 系统 
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1-7 ”企业 网 站 的 站 点 结构 图 


企业 背 最 ete | 客户 服务 产品 系统 









































1.4.4 设计 网 页 图 像 


在 规划 好 网 站 的 栏目 结构 和 搜集 完 资料 后 就 可 以 设计 网 页 图 像 了 ， 网 页 图 像 设计 包括 
Logo、 标 准 色 彩 、 标 准 字 、 导 航 条 和 首页 布局 等 。 可 以 使 用 Photoshop 或 Fireworks 软件 来 
具体 设计 网 站 的 图 像 。 有 经 验 的 网 页 设计 者 ， 通 常会 在 使 用 网 页 制作 工具 制作 网 页 之 前 ， 
设计 好 网 页 的 整体 布局 ， 这 样 在 具体 的 设计 过 程 中 将 会 胸有成竹 ， 大 大 节省 工作 时 间 。 如 
图 1-8 所 示 是 设计 的 网 页 整体 图 像 。 


韩 明 移动 厅 首页 公司 全 业 。 新 闻 店 心 产品 服务 成 功 紧 例 。 联系 我 们 
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策 襄 秽 动 新 生活 





图 1-8 设计 网 页 图 像 


1.4.5 制作 页 面 
具体 到 每 一 个 页 面 的 制作 时 ， 首 先 要 做 的 就 是 设计 版 面 布局 。 就 像 传统 的 报纸 杂志 一 
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样 ， 需 要 将 网 页 看 作 一 张 报纸 、 一 本 杂志 来 进行 排版 布局 。 
面 指 的 是 在 浏览 器 中 看 到 的 完整 的 一 个 页 面 的 大 小 。 因 为 每 个 人 电脑 的 显示 器 分 辨 
率 不 同 ， 所 以 同一 个 页 面 的 大 小 可 能 出 现 640pxx480px、800pxx600px 或 1024pxx768px 等 
不 同 尺寸 。 目 前 电脑 主要 以 1024pxx768px 分 辩 率 为 主 ， 在 实际 制作 网 页 时 ， 应 将 网 页 宽度 
限制 在 778px 以 内 (可 以 用 表格 或 层 来 进行 限制 )， 这 样 在 用 1024pxx768px 分 辨 率 的 显示 器 
进行 浏览 时 ， 除 去 浏览 器 左右 的 边框 后 ， 刚 好 能 完全 显示 出 网 页 的 内 容 。 

布局 ， 就 是 以 最 适合 浏览 的 方式 将 图 片 和 文字 排放 在 页 面 的 不 同位 置 。 这 是 一 个 创意 
的 过 程 ， 需 要 一 定 的 经 验 ， 当 然 也 可 以 参考 一 些 优秀 的 网 站 来 寻求 灵感 。 

版 面 布局 完成 后 ， 就 可 以 着 手 制 作 每 一 个 页 面 了 ， 通 常 都 从 首页 做 起 ， 制 作 过 程 中 可 
以 先 使 用 表格 或 层 对 页 面 进行 整体 布局 ， 然 后 将 需要 添加 的 内 容 分 别 添加 到 相应 的 单元 格 
中 ， 并 随时 预览 效果 并 进行 调整 ， 直 到 整个 页 面 完成 并 达到 理想 的 效果 ， 然 后 用 相同 的 方 
法 完成 整个 网 站 中 其 他 页 面 的 制作 。 

网 页 制作 是 一 个 复杂 而 细致 的 过 程 ,一定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 制作 。 
所 谓 先 大 后 小 ， 就 是 说 在 制作 网 页 时 ， 先 把 大 的 结构 设计 好 ， 然 后 再 逐步 完善 小 的 结构 设 
计 。 所 谓 先 简单 后 复杂 ， 就 是 先 设计 出 简单 的 内 容 ， 然 后 再 设计 复杂 的 内 容 ， 以 便 出 现 问 
题 时 容易 修改 。 在 制作 网 页 时 要 灵活 运用 模板 和 库 ， 这 样 可 以 大 大 提高 制作 效率 。 如 果 很 
多 网 页 都 使 用 相同 的 版 面 设计 ， 就 应 为 这 个 版 面 设计 一 个 模板 ， 然 后 就 可 以 以 此 模板 为 基 
础 创建 网 页 。 以 后 如 果 想 要 改变 所 有 网 页 的 版 面 设计 ， 只 需 简 单 地 改变 模板 即 可 。 如 图 1-9 
所 示 为 制作 的 网 页 。 





















































1-9 制作 的 网 页 


1.4.6 ”实现 后 台 功 能 
页 面 设 计 制 作 完 成 后 ， 如 果 还 需要 动态 功能 的 话 ， 就 需要 开发 动态 功能 模块 。 网 站 中 
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常用 的 功能 模块 有 留言 板 、 搜 索 功能 、 新 闻 信 息 发 布 、 在 线 购物 等 。 

1. 留言 板 

留言 板 、 论 坛 及 聊天 室 是 为 浏览 者 提供 的 信息 交流 的 地 方 。 浏 览 者 可 以 围绕 个 别 的 产 
品 、 服 务 或 其 他 话题 进行 讨论 。 顾 客 也 可 以 提出 问题 ， 进 行 咨 询 ， 或 者 得 到 售后 服务 。 但 
是 聊天 室 和 论坛 是 比较 占用 资源 的 ， 一 般 非 大 中 型 的 网 站 没有 必要 建设 论坛 和 聊天 室 ， 如 
果 访 问 量 不 是 很 大 ， 做 好 了 也 是 没有 人 来 访问 的 。 如 图 1-10 所 示 为 留言 板 页 面 。 





中 nil 


上 
有 
PLD 一 
在 线 留言 
ES [= 
1 RB 
和 
本 tT 于 
同 直 天天 | 同 题 天 到 时 
Pa 
提交 


1-10 留言 板 页 面 


2. 搜索 功能 

搜索 功能 是 使 浏览 者 在 短 时 间 内 ， 人 快速 地 从 大 量 的 资料 中 找到 符合 要 求 的 资料 。 这 对 
于 资料 非常 丰富 的 网 站 来 说 很 有 用 。 要 建立 一 个 搜索 功能 ， 就 要 有 相应 的 程序 以 及 完善 的 
数据 库 支 持 ， 可 以 快速 地 从 数据 库 中 搜索 到 所 需要 的 资料 。 

3. 新 闻 信 息 发 布 

新 闻 发 布 管理 系统 提供 方便 直观 的 页 面 文字 信息 的 更 新 维护 界面 ， 提 高 了 工作 效率 ， 
降低 了 技术 要 求 , 非常 适用 于 经 常 更 新 的 栏目 或 页 面 。 如 图 1-11 所 示 是 新 闻 发 布 管理 系统 。 


4. 在 线 购物 


在 进行 网 上 购物 的 时 候 , 用 户 将 感 兴趣 的 产品 放 入 自己 的 购物 车 ， 以 备 最 后 统一 结账 。 
当然 用 户 也 可 以 修改 购物 的 数量 ， 甚 至 将 产品 从 购物 车 中 取出 。 用 户 选择 “结算 ”后 系统 
将 自动 生成 本 系统 的 订单 。 如 图 1-12 所 示 为 购物 网 站 。 
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图 1-11 新 闻 发 布 管理 系统 图 1-12 ”购物 网 站 


1.4.7 ”网 站 的 测 


试 与 发 布 


在 将 网 站 的 内 容 上 传 到 服务 器 之 前 ， 应 先 在 本 地 站 点 进行 完整 的 测试 ， 以 保证 页 面 外 





观 和 效果 、 链 接 和 页 1 





下 载 时 间 等 与 设计 相同 。 站 点 测试 主要 包括 检测 站 点 在 各 种 浏览 器 











中 的 兼容 性 ， 检 测 站 点 中 是 否 有 断 掉 的 链接 。 用 户 可 以 使 用 不 同类 型 和 不 同 版 本 的 浏览 器 
预览 站 点 中 的 网 页 ， 检 测 可 能 存在 的 问题 。 
在 完成 了 对 站 点 中 页 面 的 制作 后 ， 就 应 该 将 其 发 布 到 Intemet 上 供 大 家 浏览 和 观赏 了 。 
但 是 在 此 之 前 ， 应 该 对 所 创建 的 站 点 进行 测试 ， 对 站 点 中 的 文件 逐一 进行 检查 ， 在 本 地 计 
算 机 中 调试 网 页 以 防止 包含 在 网 页 中 的 错误 ， 以 便 尽 早 发 现 问题 并 解决 。 
在 测试 站 点 的 过 程 中 应 注意 以 下 几 个 方面 。 
e@ 在 测试 站 点 的 过 程 中 应 确保 在 目标 浏览 器 中 ， 网 页 能 够 如 预期 地 显示 和 工作 、 没 
有 损坏 的 链接 、 下 载 时 间 不 宜 过 长 等 。 
@ 了 解 各 种 浏览 器 对 Web 页 面 的 支持 程度 ， 不 同 的 浏览 器 查看 同一 个 Web 页 面 ， 
会 有 不 同 的 效果 。 很 多 制作 的 特殊 效果 ， 在 有 些 浏览 器 中 可 能 看 不 到 ， 为 此 需要 
进行 浏览 器 兼容 性 检测 ， 以 找 出 不 被 其 他 浏览 器 支持 的 部 分 。 


e@ ”检查 链接 的 J 





E 确 性 ， 可 以 通过 Dreamweaver 提供 的 检查 链接 功能 检查 文件 或 站 点 


中 的 内 部 链接 及 孤立 文件 。 
网 站 的 域名 和 空间 申请 完毕 后 ， 就 可 以 上 传 网 站 了 ， 可 以 采用 Dreamweaver 自 带 的 站 





点 管理 工具 上 传 文件 。 




















HIML 是 目前 网 络 上 应 用 最 为 广泛 的 语言 ， 也 是 构成 网 页 文档 的 基本 语言 。 本 章 介绍 
了 HTML 的 基本 概念 、 编 写 方法 和 HIML 页 面 基本 标签 以 及 网 页 设计 与 开发 的 基本 流程 。 
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通过 本 章 的 学 习 ， 读 者 对 HIML 有 了 初步 的 了 解 ， 从 而 为 后 面 设 计 和 制作 更 复杂 的 网 页 打 
下 良好 的 基础 。 





练 习 题 

1. 填空 题 

(1) HIML 是 以 文字 为 基础 的 语言 ， 并 不 需要 什么 特殊 的 开发 环境 ， 可 以 直接 在 
Windows 自 带 的 记事 本 中 编写 。HTML 文档 以 为 扩展 名 。 

(2) 由 于 用 HTML 语言 编写 的 文件 是 标准 的 ASCII 文本 文件 , 因此 可 以 使 用 任意 一 个 
文本 编辑 器 来 打开 并 编写 HTML 文件 ， 例 如 Windows 系统 中 自 带 的 。 如 果 使 
用 等 软件 ， 则 能 以 可 视 化 的 方式 进行 网 页 的 编辑 制作 等 。 

2. 操作 题 


(1) 用 下 浏览 器 打开 网 上 的 任意 一 个 网 页 ， 选择 “查看 ”一 “ 源 文件 ”菜单 命令 ,在 
打开 的 记事 本 中 查看 各 代码 ， 并 试 着 与 浏览 器 中 的 内 容 进 行 对 照 。 

(2) 分 别 利用 记事 本 和 Dreamweaver 创建 一 个 简单 的 HTML 网 页 。 

(3) 简 述 网 页 设计 与 开发 的 一 般 步骤 。 
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【学 习 目标 】 

<head> 作 为 各 种 声明 信息 的 包含 元 素 出 现在 文档 的 顶端 ， 并 且 要 先 于 <body> 出 现 。 而 
<body> 用 来 显示 文档 主体 内 容 。 本 章 就 来 讲解 这 些 基 本 标签 的 使 用 ， 这 些 都 是 一 个 完整 的 
网 页 必 不 可 少 的 。 通 过 它们 可 以 了 解 网 页 的 基本 结构 及 其 工作 原理 。 

本 章 主要 内 容 包括 : 

(1) HTML 页 面 主体 标签; 

(2) 头 部 标签。 


2.1 HTML 页面 主 体 标签 


在 <body> 和 </body> 标 签 中 放置 的 是 页 面 中 所 有 的 内 容 ， 如 图 片 、 文 字 、 表 格 、 表 单 、 
超 链接 等 。<body> 标 签 有 自己 的 属性 ， 包 括 网 页 的 背景 设置 、 文 字 属 性 设置 和 链接 设置 等 。 
设置 <body> 标 签 内 的 属性 ， 可 控制 整个 页 面 的 显示 方式 。 


2.1.1 定义 网 页 背景 色 : bgcolor 


对 大 多 数 浏览 器 而 言 ， 其 默认 的 背景 颜色 为 白色 或 灰白 色 。 在 网 页 设计 中 ，bgcolor 属 
性 用 来 标志 整个 HTML 文档 的 背景 颜色 。 
基本 语法 : 


<body bgcolor=" 背 景 颜色 "> 


语法 说 明 : 

背景 颜色 有 以 下 两 种 表示 方法 。 

(1) 使 用 颜色 名 指定 ， 例 如 红色 、 绿 色 等 ， 分 别 用 red、green 表示 。 

(2) 使 用 十 六 进 制 格式 数据 值 术 RGGBB 来 表示 , RR、GG、BB 分 别 表示 颜色 中 的 红 、 
绿 、 蓝 三 基色 的 两 位 十 六 进 制 数据 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 

















<meta charset="utf-8"> 
<title> 定 义 网 页 背景 色 </title> 
</head> 


中 由 有 有 第 2 音 “HTML 基本 标签 
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<body bgcolor="#c33000"> 
</body> 
</html> 


加 粗 部 分 的 代码 是 为 页 面 设置 背景 颜色 ， 在 浏览 器 中 预览 效果 ， 如 图 2-1 所 示 。 
背景 颜色 在 网 页 上 很 常见 ， 如 图 2-2 所 示 的 网 页 使 用 了 大 面积 的 绿色 背景 。 


司 冯 名 :tbcolorhtml P -C || 局 二 RF 有 
文体 (六 和 (E) 到 者 V) 履带 (A】 工具 站 者 凤 (H) 


后 期 草坪 养护 指导 
方便 六 时 的 物流 配送 系统 





图 2-1 设置 页 面 的 背景 颜色 图 2-2 使 用 背景 颜色 的 网 页 


2.1.2 设置 背景 图 片 : background 


网 页 的 背景 图 片 可 以 衬托 网 页 的 显示 效果 ， 从 而 取得 更 好 的 视觉 效果 。 背 景 图 片 的 选 
择 不 仅 要 好 看 ， 而 且 还 要 注意 不 要 “ 哈 宾 夺 主 ”， 影 响 网 页 内 容 的 阅读 。 通 常 使 用 深 色 背 
景 图 片 配合 浅 色 的 文本 ， 或 者 是 浅 色 背景 图 片 配合 深 色 的 文本 。background 属性 用 来 设置 
HTML 网 页 的 背景 图 片 。 

基本 语法 : 

<body background=" 图 片 的 地 址 "> 

语法 说 明 : 

background 属性 值 就 是 背景 图 片 的 路 径 和 文件 名 。 图 片 的 地 址 可 以 是 相对 地 址 ， 也 可 
以 是 绝对 地 址 。 在 默认 情况 下 ， 用 户 如 果 不 加 no-repeat 属性 ， 图 片 会 按照 水 平和 垂直 的 方 
向 不 断 重复 出 现 ， 直 到 铺 满 整个 页 面 。 

实例 代码 : 

<!doctype html> 


<html> 
<head> 





<meta charset="utf-8"> 
<title> 设 置 背景 图 片 </title> 
</head> 

<body background="bg .jpg"> 
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</body> 

</html> 

加 粗 部 分 的 代码 是 设置 网 页 背景 图 片 的， 在 浏览 器 中 预览 可 以 看 到 的 背景 图 像 ， 如 
图 2-3 所 示 。 





I 司 片 ,bedereundjhml P - 0 | 语 玫 本 让 SF 
文件 中 ”将 妆 昌 “可 音 NM。 收 庆 AI 工 上 (大 IH] 











2-3 页 面 的 背景 图 像 


在 网 上 除了 可 以 看 到 各 种 背景 色 的 网 页 之 外 , 还 可 以 看 到 一 些 以 图 片 作为 背景 的 网 页 。 
如 图 2-4 所 示 的 网 页 使 用 了 背景 图 像 。 


CET TE 





(S53 








2-4 使 用 了 背景 图 像 


怪 提示 : 在 网 页 中 可 以 使 用 图 片 作 背景 , 但 图 片 一 定 要 与 插图 以 及 文字 的 颜色 相 协调 ， 
才能 达到 美观 的 效果 ， 如 果 色差 太 大 会 使 网 页 失去 美感。 
为 保证 浏览 器 载 入 网 页 的 速度 ， 建 议 尽 量 不 要 使 用 字 节 过 大 的 图 片 作为 背景 
图 片 。 


2.1.3 ”设置 文字 颜色 : text 


通过 text 可 以 设置 <body> 体 内 所 有 文本 的 颜色 ,在 没有 对 文字 的 颜色 进行 单独 定义 时 ， 
该 属性 可 以 对 页 面 中 所 有 的 文字 起 作用 。 





16 








山 山 册 ET 
WIILLLLLLE 
基本 语法 : 
<body text=" 文 字 的 颜色 "> 
语法 说 明 : 
在 该 语法 中 ，text 的 属性 值 与 设置 页 面 背景 色相 同 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设 置 文字 颜色 </title> 

</head> 

<body text="#FF0000"> 

<p> 有 昔 有 乐 的 人 生 是 充实 的 ， 有 成 有 败 的 人 生 是 合理 的 ， 有 得 有 失 的 人 生 是 公平 的 ， 人 生 坎 坷 不 平 
才 有 价值 。 有 赢 就 有 输 ， 有 成 就 有 败 ， 有 得 就 有 失 ;， 要 成 就 必须 去 承担 ， 要 光明 必须 接受 黑暗 ， 要 
志 业 必须 去 付出 ; 世间 任何 一 件 非 凡 之 事 ， 必 有 超常 险 境 和 苦难 ， 旋 涡 中 淡定 从 容 者 必 致 远 。</p> 
</body> 

</html> 


加 粗 部 分 的 代码 是 设置 文字 颜色 , 在 浏览 器 中 预览 可 以 看 到 文档 中 文字 的 颜色 , 如 图 2-5 
所 示 。 
© ESE oO- ¢| Gianx7me 4 F- 
文件 (入 铀 日 ”得 看 (V) 妆 枯 天 (人 A) 工具 (T】 村 芭 IH) 
有 苦 有 乐 的 人 生 是 充实 的 ， 有 有 直入 的 人 入 全 于 的 让 守 人 和 是 全 
,从 生 坎 人， bl 各 有 败 , 要 
ei 人 件 


成 就 必须 去 承担 ， 要 光明 必须 接受 : 要 志 
和 2 ee rE 








也 1006 > 





图 2-5 设置 文字 的 颜色 


2.1.4 ”设置 链接 文字 属性 


为 了 突出 超 链接 ， 超 链接 文字 通常 采用 与 其 他 文字 不 同 的 颜色 ， 超 链接 文字 的 下 端 还 
会 加 一 个 横 线 。 网 页 的 超 链接 文字 有 默认 的 颜色 ， 即 浏览 器 以 蓝 色 作为 超 链接 文字 的 颜色 
访问 过 的 文字 颜色 则 变 为 瞳 红 色 。 在 <body> 标 签 中 也 可 自 定义 这 些 颜 色 。 

基本 语法 : 


<body link=" 颜 色 "> 
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语法 说 明 : 

该 属性 的 设置 与 前 面 几 个 设置 
对 网 页 中 所 有 未 单独 设置 的 元 素 起 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 


颜色 的 参数 类 似 , 都 是 与 body 标签 放置 在 一 起 , 表明 它 


作用 。 


<title> 设 置 链接 文字 的 颜色 </title> 


</head> 

<body link="#9933ff"> 

<center> 
<a href="#"> 伤 感 文章 <pr / 
<a href="#"> 情感 日 志 <br 
<a href="#"> 心 情 日 记 <br / 
<a href="#"> 散文 精 选 <br 


> 
/> 
> 

/> 


<a href="#"> 诗歌 大 全 经 </a> 


</center> 
</body> 
</html> 


加 粗 部 分 的 代码 是 为 链接 文字 


设置 颜色 ， 在 浏览 器 中 预览 效果 ， 可 以 看 到 链接 的 文字 


已 经 不 是 默认 的 蓝 色 ， 如 图 2-6 所 示 。 


装 DAHTML+DIV+CSSF ~ ] | 铺设 村 狠 文字 的 正 色 
| 文 8 加 6 下 看 M 三 交工 具 m。 由) 





甩 100%6 





图 


2-6 设置 链接 文字 的 颜色 





使 用 alink 可 以 设置 鼠标 未 单 1 
<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


f 超 链接 时 的 颜色 ， 举 例如 下 。 


<title> 设 置 链 接 文 字 的 颜色 </title> 


</head> 
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<body link="#9933ff" alink="#0066FF"> 
<center> 
<a href="#"> 伤 感 文章 <br /> 
<a href="#"> 情感 日 志 <br /> 
<a href="#"> 心 情 日 记 <br /> 
<a href="#"> 散文 精 选 <br /> 
<a href="#"> 诗歌 大 全 经 </a> 
</center> 
</body> 
</html> 


加 粗 部 分 的 代码 是 设置 未 单 击 链接 时 文字 的 颜色 ， 在 浏览 器 中 预览 效果 ， 可 以 看 到 单 





链接 文 字 时 ， 文 字 已 经 改变 了 颜色 ， 如 图 2-7 所 示 。 





@ 息 fle///DJHTML+DIV+ 吕 -C | 名 设 村 外 接 文 字 的 蜂 色 
文件 昌 。 妨 强 (E) 查看 (V) ”收藏 交 (A) ”工具 (帮助 (H) 





files///DWHTML+ DIV+CSS 网 页 设计 与 布 赂 实用 手册 /效果 /02/Untitled-4.htmie 磺 100% > 











图 2-7 未 单 击 链 接 文字 时 的 颜色 
使 用 vlink 可 以 设置 已 访问 过 的 超 链接 颜色 ， 举 例如 下 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 置 链接 文字 的 颜色 </title> 
</head> 
<body link="#9933ff" alink="#0066FF" vlink="#FF0000"> 
<center> 

<a href="#"> 伤 感 文章 <br /> 

<a href="#"> 情 感 日 志 <br /> 

<a href="#"> 心 情 日 记 <br /> 

<a href="#"> 散 文 精 选 <br /> 

<a href="#"> 诗 歌 大 全 经 </a> 
</center> 
</body> 
</html> 
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加 粗 部 分 的 代码 是 为 链接 文字 设置 访问 后 的 颜色 ， 在 浏览 器 中 预览 效果 ， 可 以 看 到 单 


击 链接 后 文字 的 颜色 已 经 发 生 改 变 ， 如 图 2-8 所 示 。 





@ 七 fle///DW/HTML+DIV1 只 -上司 设 梧 外接 文字 的 闫 色 
文件 昌 。 办 得 6 坦 看 V) 。 收 讲 夫 (A) 工具 (T) 帮助 (H) 














态 100% > 





2-8 ”访问 后 的 链接 文字 的 颜色 已 发 生 改变 


2.1.5 设置 页 面 边 距 


边 ， 


有 的 朋友 在 做 页 面 的 时 候 ， 感 觉 文字 或 者 表格 怎么 也 不 能 靠 在 浏览 器 的 最 上 边 和 最 左 
这 是 怎么 回 事 呢 ? 因为 一 般 用 的 网 页 制作 软件 或 HTML 语言 默认 的 都 是 topmargin、 








leftmargin 值 等 于 12， 如 果 你 把 它们 的 值 设 为 0， 就 会 看 到 网 页 的 元 素 与 左边 距离 为 0 了 。 


基本 语法 : 


<body topmargin="value" leftmargin="value" rightmargin="value" 
bottommargin=value> 


语法 说 明 : 
通过 设置 topmargin/leftmargin/rightmargin/bottommargin 的 不 同 的 属性 值 来 设置 显示 内 


容 与 浏览 器 的 距离 : 默认 情况 下 ， 边 距 的 值 以 像素 为 单位 。 


@ topmargin: 设置 到 顶端 的 距离 。 

@ leftmargin: 设置 到 左边 的 距离 。 

@ rightmargin: 设置 到 右边 的 距离 。 
@ ”bottommargin: 设置 到 底 边 的 距离 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 设 置 边 距 </title> 

</head> 

<body topmargin="150" leftmargin="200"> 
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<p> 设 置 页面 的 上 边 距 </p> 
<p> 设 置 页 面 的 左边 距 </p> 
</body> 
</html> 


加 粗 部 分 的 代码 是 设置 上 边 距 和 左边 距 ， 在 浏览 器 中 预览 效果 ， 可 以 看 出 定义 的 边 距 
效果 ， 如 图 2-9 所 示 。 








- 口 x 
国 psrrMLrDv+CSSRRISi DC] 居 设 大 
文件 (六 霹 E) 喜 看 (VW) 收藏 夫 [A) 工具 TT) 帮 胎 (H) 
设置 页 面 的 上 边 算 
设置 页 面 的 左边 距 
太 100% 








2-9 ”设置 的 边 距 效果 


[对 提示 :， 一 般 建议 将 网 站 的 页 面 左边 距 和 上 边 距 都 设置 为 0， 这 样 看 起 来 页 面 不 会 有 
太 多 的 空白 。 


2.2 head 部 分 标签 


HTML 中 的 <head> 标 签 是 网 页 标签 中 一 个 非常 重要 的 符号 ，head 标签 中 包含 的 内 容 基 
本 上 描述 了 所 属 页 面 的 基本 属性 ， 包 括 标题 、 字 符 集 、 站 点 信息 、 网 站 作者 信息 、 站 点 描 
述 、 站 点 关键 字 、 刷 新 及 跳 转 、 样 式 表 链 入 以 及 其 他 一 些 有 用 的 附加 功能 。 做 好 <head> 标 
签 中 的 内 容 对 整个 页 面 有 着 非常 重要 的 意义 , 下 面 介 绍 <head> 标 签 中 比较 常用 的 一 些 东西 。 


2.2.1 标题 标签 : <title> 


不 管 是 用 户 还 是 搜索 引擎 ， 对 一 个 网 站 的 最 直观 的 印象 往往 来 自 于 这 个 网 站 的 标题 。 
用 户 通过 搜索 关键 字 ， 进 入 搜索 结果 页 面 ， 决 定 用 户 是 否 单 击 所 搜索 的 结果 往往 取决 于 网 
站 的 标题 。 在 网 页 中 设置 网 页 的 标题 ， 只 要 在 HTML 文件 的 头 部 文件 的 <title></title> 中 输 
入 标题 信息 就 可 以 在 浏览 器 的 标题 栏 上 显示 。 标 题 标签 以 <title> 开 始 ， 以 </title> 结 束 。 

基本 语法 : 

<head> 


<title>...</title> 
.</head> 
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语法 说 明 : 
页 面 的 标题 只 有 一 个 ， 它 位 于 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 标 题 标 记 title</title> 
</head> 

<body> 

</body> 

</html> 


己 提示 : 了 解 了 网 站 标题 的 重要 性 之 后 ， 下 面 来 看 一 下 如 何 设置 网 站 标题 。 首 先 应 该 
明确 网 站 的 定位 ， 即 希望 对 哪 类 词 感 兴趣 的 用 户 能 够 通过 搜索 引擎 进入 他 们 
的 站 点 ， 在 经 过 关键 字 调 研 之 后 ， 选 择 几 个 能 带 来 较 大 访问 量 的 关键 宇 ， 然 
后 把 最 具 代 表 性 的 关键 字 放 在 <title> 的 最 前 面 。 


2.2.2 ”定义 页 面 关键 字 


关键 字 是 描述 网 站 的 产品 及 服务 的 词语 ， 选 择 适当 的 关键 字 是 建立 一 个 高 排名 网 站 的 
第 一 步 。 选 择 关键 字 的 一 个 重要 技巧 是 选取 那些 常 被 人 们 在 搜索 时 所 用 到 的 关键 字 。 当 用 
关键 字 搜索 网 站 时 ， 如 果 网 页 中 包含 该 关键 字 ， 就 可 以 在 搜索 结果 中 列 出 来 。 

基本 语法 : 

<meta name="keywords" content=" 具 体 的 关键 字 "> 


语法 说 明 : 

在 该 语法 中 ，name 为 属性 名 称 ， 这 里 是 keywords， 也 就 是 设置 网 页 的 关键 字 属性 ， 而 
在 content 中 则 定义 具体 的 关键 字 。 加 粗 的 代码 为 输入 关键 字 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="keywords"” content=" 关 键 字 "> 
<title> 关 键 字 </title> 

</head> 

<body> 

</body> 

</html> 


BD > 
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要 选择 与 网 站 或 页 面 主题 相关 的 文字 ; 

选择 具体 的 词语 ， 别 寄 望 于 行业 或 笼统 的 词语 ; 

揣摩 用 户 会 用 什么 作为 搜索 词 ， 把 这 些 词 放 在 页 面 上 或 直接 作为 关键 字 ; 
关键 字 可 以 不 止 一 个 ， 最 好 根据 不 同 的 页 面 ， 制 定 不 同 的 关键 字 组 合 ， 这 
样 页 面 被 搜索 到 的 概率 将 大 大 增加 。 


[名 提示 : 


2.2.3 ”定义 页 面 描述 


描述 属性 是 description, 网 页 的 description 属性 为 搜索 引擎 提供 了 关于 这 个 网 页 的 总 括 
性 描述 。 网 页 的 description 属性 是 由 一 两 个 语句 或 段落 组 成 的 ， 内 容 一 定 要 有 相关 性 ， 描 
述 不 能 太 短 、 太 长 或 过 分 重复 。 

基本 语法 : 

<meta name="description" content=" 设 置 页 面 描述 "> 

语法 说 明 : 

在 该 语法 中 ，name 为 属性 名 称 ， 这 里 设置 为 description， 也 就 是 将 元 信息 属性 设置 为 
页 面 说 明 ， 在 content 中 定义 具体 的 描述 语言 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="description" content=" 页 面 描述 "> 

<title> 设 置 页 面 描述 </title> 

</head> 

<body> 

</body> 

</html> 





去 提示 : ”在 创建 description 属性 时 请 注意 避免 以 下 几 点 误区 : 

@ 把 网 页 的 所 有 内 容 都 复制 到 描述 元 标签 中 ; 

@ 与 网 页 实际 内 容 不 相符 的 description 属性 , 一 定 要 注意 描述 应 和 网 站 主题 
相关 ; 
过 于 宽泛 的 描述 ， 比 如 “这 是 一 个 网 页 ”或 “关于 我 们 ”等 ; 
在 描述 部 分 堆砌 关键 字 ， 堆 砌 关键 字 不 仅 不 利于 排名 ， 还 会 受到 惩罚 ; 
很 多 网 页 使 用 千篇一律 的 description 属性 ， 这 样 不 利于 网 站 优化 。 
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2.2.5 ”定义 作者 信息 





2.2.4 定义 网 页 编辑 工具 


现在 有 很 多 网 页 编辑 工具 都 可 以 制作 网 页 ， 在 源 代码 的 头 部 可 以 设置 网 页 编辑 工具 的 














名 称 。 与 其 他 meta 元 素 相 同 ， 网 页 编辑 工具 也 只 是 在 页 面 的 源 代码 中 可 以 看 到 ， 而 不 会 显 








示 在 浏览 器 中 。 

基本 语法 : 

<meta name="generator" content=" 网 页 编辑 工具 的 名 称 "> 

语法 说 明 : 

在 该 语法 中 , name 为 属性 名 称 , 设置 为 generator, 也 就 是 设置 网 页 编辑 工具 , 在 content 
中 定义 具体 的 网 页 编辑 工具 名 称 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 

<meta name="generator" content="FrontPage"> 
<title> 设 置 编辑 工具 </title> 

</head> 

<body> 

</body> 

</html> 


加 粗 部 分 的 代码 是 定义 网 页 编辑 工具 。 

















在 源 代码 中 还 可 以 设置 网 页 制作 者 的 姓名 。 

基本 语法 : 

<meta name="author" content=" 作 者 的 姓名 "> 

语法 说 明 : 

在 该 语法 中 ，name 为 属性 名 称 ， 设 置 为 author， 也 就 是 作者 信息 ， 在 content 中 定义 


具体 的 信息 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="author" content=" 崔 小 轩 "> 
<title> 设 置 作者 信息 </title> 
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</head> 
<body> 

</body> 
</html> 


加 粗 的 代码 部 分 的 代码 为 设置 作者 的 信息 。 
2.2.6 ”定义 网 页 文字 及 语言 


在 网 页 中 还 可 以 设置 语言 的 编码 方式 ， 这 样 浏览 器 就 可 以 正确 地 选择 语言 ， 而 不 需要 
人 工 选 取 。 

基本 语法 : 

<meta http-equiv="content-type" content="text/html; charset= 字 符 集 类 型 " /> 

语法 说 明 : 

在 该 语法 中 ，http-equiv 用 于 传送 HTTP 通信 协议 的 标 头 ， 而 在 content 中 才 是 具体 的 
属性 值 。charset 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 的 类 型 ， 国 内 常用 的 是 GB 码 ， 
charset 往往 设置 为 GB2312， 即 简体 中 文 。 英 文 是 ISO-8859-1 字符 集 ， 此 外 还 有 其 他 的 字 
符 集 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 网 页 文字 及 语言 ， 此 处 设置 为 utf-8。 
2.2.7 ”定义 网 页 的 定时 跳 转 


在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 ， 在 经 过 一 段 时 间 后 ， 这 些 页 面 会 自动 
转 到 其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 用 http-equiv 属性 中 的 refresh 不 仅 能 够 完成 页 面 自 身 
的 自动 刷新 ， 也 可 以 实现 页 面 之 间 的 跳 转 。 通 过 设置 meta 对 象 的 http-equiv 属性 来 实现 跳 
转 页 面 。 

基本 语法 : 

<meta http-equiv="refresh"” content=" 跳 转 的 时 间 ;URL= 跳 转 到 的 地 址 "> 

语法 说 明 : 

在 该 语法 中 ,refresh 表示 网 页 的 刷新 ， 而 在 content 中 设置 刷新 的 时 间 和 刷新 后 的 链接 


25 < 
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地 址 ， 时 间 和 链接 地 址 之 间 用 分 号 相隔 。 默 认 情 况 下 ， 跳 转 时 间 以 秒 为 单位 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8" > 

<meta http-equiv="refresh" content="10;url=indexl1.html"> 
<title> 定 义 网 页 的 定时 跳 转 </title> 
</head> 

<body> 

10 秒 后 自动 跳 转 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 网 页 的 定时 跳 转 , 这 里 设置 为 10 秒 后 跳 转 到 index1. html 页 面 。 
在 浏览 器 中 预览 可 以 看 出 ， 跳 转 前 如 图 2-10 所 示 ， 跳 转 后 如 图 2-11 所 示 。 











a 9 x 二 口 x 
咎 DAHTML+DIV+CsSSR "0 | 局 均 义 网 页 的 定时 路 村 @ 自 DAHTML*DIV+CSSR 户 -0 | 医 无 标本 文档 
KAD MAH PEM WN IRM HOM MD MAD EW RN IRM Wt) 
10 种 后 自动 中 竺 2 后 


R100% -~ 册 100% ~ 








图 2-10 ” 跳 转 前 图 2-11 跳 转 后 


2.3 ”综合 实例 一 一 创建 基本 的 HTML 文件 


本 章 主 要 学 习 了 HTML 文件 整体 标签 的 使 用 ， 下 面 就 用 所 学 的 知识 来 创建 最 基本 的 
HTML 文件 。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 2-12 所 示 。 

(2) 打开 拆 分 视图 ， 在 <head> 和 </head> 之 间 输 入 代码 ， 来 定义 网 页 的 语言 ， 如 图 2-13 
所 示 。 

(3) 在 <title><jtitle> 之 间 输 入 标题 “ 翔 宇 科技 ”， 如 图 2-14 所 示 。 

(4) 在 <body> 标 签 中 输入 bgcolor="#0C0", 用 来 定义 网 页 的 背景 颜色 , 如 图 2-15 所 示 。 

(5) 在 <body> 语 句 中 输入 textF="#EFFFFF", 设置 整个 文档 的 文本 颜色 , 如 图 2-16 所 示 。 

(6) 在 <body> 标 签 中 输入 topmargin="15" leftmargin="15"， 用 于 设置 网 页 的 上 边 距 和 
左边 距 ， 将 上 边 距 设置 为 15px， 左 边 距 设 置 为 15px， 如 图 2-17 所 示 。 
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图 2-14 设置 网 页 的 标题 
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图 2-16 设置 文字 的 颜色 
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(7) 保存 网 页 ， 在 浏览 器 中 预览 ， 如 图 2-18 所 示 。 
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图 2-18 效果 图 


本 章 小 结 


一 个 完整 的 HTML 文档 必须 包含 3 个 部 分 : 由 <html> 标 签 定义 的 文档 版 本 信息 ， 由 
<head> 定 义 各 项 声明 的 文档 头 部 和 由 <body> 定 义 的 文档 主体 部 分 。 本 章 重 点 介绍 了 HTML 
的 主体 标记 、 头 部 标记 。 通 过 对 本 章 的 学 习 ， 读 者 对 HTML 有 了 初步 的 了 解 ， 从 而 为 后 面 
的 学 习 打 下 基础 。 


1. 填空 题 


(1) 使 用 <body> 标 签 的 属性 可 以 为 整个 网 页 定义 背景 颜色 。 使 用 
属性 可 以 将 图 片 设置 为 背景 ， 还 可 以 设置 背景 图 片 的 平 铺 方 式 、 显 示 方 式 等 。 

(2) 在 HTML 语言 的 头 部 元 素 中 ， 一 般 需要 包括 标题 、 基 础 信息 和 元 信息 等 。HITML 
的 头 部 元 素 是 以 为 开始 标记 ， 以 为 结束 标记 的 。 

2. 操作 题 

创建 最 基本 的 HTML 文件 ， 如 图 2-19 所 示 。 
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2-19 简单 HTML 文 件 
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【学 习 目标 】 

文字 不 仅 是 网 页 信息 传达 的 一 种 常用 方式 ， 也 是 视觉 传达 最 直接 的 方式 ， 运 用 经 过 精 
心 处 理 的 文字 材料 完全 可 以 制作 出 效果 很 好 的 版 面 。 输 入 完 文 本 内 容 后 就 可 以 对 其 格式 进 
行 调整 ， 而 设置 文本 样式 是 实现 快速 编辑 文档 的 有 效 操作 ， 让 文字 看 上 去 编排 有 序 、 整 齐 
美观 。 通 过 对 本 章 的 学 习 ， 读 者 可 以 掌握 如 何在 网 页 中 合理 地 使 用 文字 ， 如 何 根据 需要 选 
择 不 同 的 文字 效果 。 

本 章 主要 内 容 包 括 : 

(1) 输入 文字 ; 

(2) 设置 文字 的 格式 ; 

(3) 设置 段落 的 格式 ; 

(4) 水 平 线 的 标签; 

(5) 创建 列表 ; 

(6) 使 用 marquee 设置 滚动 效果 。 


3.1 标 题 字 


标题 (heading) 是 通过 <hl> 一 <h6> 等 标签 进行 定义 的 。<hl> 定义 最 大 的 标题 ，<h6> 
定义 最 小 的 标题 。 


3.1.1 标题 字 标签 : <h> 


在 遵循 网 页 标准 制作 网 页 的 时 候 ， 为 了 使 设计 更 具有 语义 化 ， 我 们 经 常会 在 页 面 中 用 
到 <hl> 一 <h6> 的 标题 标签 。 标题 标签 是 指 HIML 网 页 中 对 文本 标题 所 进行 的 着 重 强调 的 标 
签 ， 标 签 <h1> 一 <h6> 字 号 依次 递减 显示 出 重要 性 的 递减 。 

基本 语法 : 

<h1>...</h1> 

<h2>...</h2> 

<h3>...</h3> 

<h4>...</h4> 


<h5>...</h5> 
<h6>...</h6> 
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语法 说 明 : 
<hl> 一 <h6> 标 签 可 定义 标题 ，<h1> 定 义 最 大 的 标题 ，<h6> 定 义 最 小 的 标题 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 标 题 元素 </title> 
</head> 

<body> 

<h1>1 级 标题 </h1> 

<h2>2 级 标题 </h2> 

<h3>3 级 标题 </h3> 

<h4>4 级 标题 </h4> 

<h5>5 级 标题 </h5> 

<h6>6 级 标题 </h6> 
</body> 

</html> 


加 粗 部 分 的 代码 用 于 设置 6 种 不 同 级 别 的 标题 ， 在 浏览 器 中 浏览 效果 如 图 3-1 所 示 。 


- oO x 
国 轴 03W5 归 字 RChenl P ”0 | 大 村 加 元 来 
文件 朋 。 名 入 (E) 三 看) 收 写 (A】 工具 加 二 H) 


1 级 标题 
2 级 标题 

3 级 标题 

4 级 标题 

5 级 标题 


《6 县 标 是 





所 1005 ~ 





图 3-1 设置 标题 大 小 


3.1.2 ”标题 字 对 齐 属性 : align 


默认 情况 下 , 表格 的 标题 水 平 居中 , 我 们 可 以 通过 align 属性 设 定 标题 文字 的 水 平 对 齐 


方式 。 


基本 语法 : 
text-align:center 


text-align:left 
text-align:right 
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语法 说 明 : 
left 为 左 对 齐 ，center 为 居中 ，right 为 右 对 齐 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 标 题 的 水 平 对 齐 </ title > 

</head> 

<body> 

<hl style="text-align:center"> 居 中 对 齐 </h1> 
<h2 style="text-align:left"> 左 对 齐 </h2> 
<h3 style="text-align:right"> 右 对 齐 </h3> 
</body> 

</html> 


通过 align 属性 设 定 标 题 的 对 齐 方式 ， 如 图 3-2 所 示 。 





- 0O x 
站 下 对 齐 属性 align ml 人 ”| 镶 标明 的 水 平 对 齐 
文件 (六 句 (E) 可 看 (V) ”收藏 突 (A) ”工具 (D) 帮助 (H) 
居中 对 齐 
左 对 齐 
右 对 齐 
息 100% ~ 











图 3-2 设置 标题 对 齐 


3.2 ”插入 其 他 标记 


在 网 页 中 除了 可 以 输入 汉字 、 英 文 和 其 他 语言 文字 外 ， 还 可 以 输入 一 些 空格 和 特殊 字 


符 ， 如 王 、$、@ 、# 等 。 


3.2.1 输入 空格 符号 
可 以 用 许多 不 同 的 方法 来 分 开 文字 ， 包 括 空格 、 标 签 。 这 些 都 被 称 为 空格 ， 因 





可 增加 字 与 字 之 间 的 距离 。 
基本 语法 : 


&nbsp; 


为 它们 


3 纪 
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语法 说 明 : 
在 网 页 中 可 以 有 多 个 空格 ， 输 入 一 个 空格 使 用 “&nbsp;” 表 示 ， 输 入 多 少 个 空格 就 添 


加 多 少 个 “&nbsp:” 


实例 代码 : 


<!doctype html> 


<head> 
<meta charset="utf-8"> 
<title> 插 入 空格 </title> 
</head> 
<body> 
<p>gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 生活 在 世界 尽头 的 雪 
人 ， 将 在 十 八 岁 的 成 人 礼 上 交 出 他 的 记忆 。 偶 然 的 时 空 重 到 ， 让 他 的 记忆 里 多 了 一 些 他 从 未 看 到 过 
的 色彩 。gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 那 个 蔡 他 戴 上 围巾 的 男孩 ， 让 他 
坚硬 的 心 多 了 牵挂 。 他 决定 ， 穿 过 神秘 通道 ， 去 那个 陌生 的 世界 。 他 只 是 想 对 男孩 说 : 没 努 力 过 的 
雪人 和 努力 过 的 雪人 ， 可 是 不 一 样 的 哦 。</p> 

</body> 
</html> 


加 粗 部 分 的 代码 是 设置 空格 ， 在 浏览 器 中 预览 ， 可 以 看 到 浏览 器 完整 地 保留 了 输入 的 
空格 代码 效果 ， 如 图 3-3 所 示 。 


1 
1 
1 
1 
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1 
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1 
1 
1 
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1 
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1 
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1 
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站 :1 输入 空格 符号 ml 岂 ”上 车 怖 入 空 准 
文件 (入 纺 ( 坦 看 (V) 。 必 节 夫人 A) 工具 (帮助 H) 


生活 在 世界 尽头 的 雪人 ， 将 在 十 八 岁 的 成 人 礼 上 交 出 他 的 记忆 。 侦 然 的 
时 宝 重 登 ， sie a 。 那 个 和 围巾 


Hig 
。 他 只 是 想 对 男孩 说 ， 的 天守 要 可 是 不 一 


图 3-3 空格 效果 


3.2.2 输入 特殊 符号 


除了 空格 以 外 ， 在 网 页 的 制作 过 程 中 ， 有 一 些 特殊 的 符号 也 需要 使 用 代码 进行 代替 。 
一 般 情况 下 ， 特 殊 符 号 的 代码 由 前 级 “有 &&”、 字 符 名 称 和 后 级“;” 组 成 。 使 用 特殊 符号 可 





以 将 键盘 


基本 语法 : 


&amp; 


BD 2 


ECOPY; 


上 没有 的 字符 输出 来 。 
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语法 说 明 : 
在 需要 添加 特殊 符号 的 地 方 输入 相应 的 符号 代码 即 可 。 常 用 符号 及 其 对 应 代码 见 表 3-1。 
表 3-1 特殊 符号 及 代码 
特殊 符号 符号 的 代码 
&quot; 





Kamp; 
&lt: 
Rat: 


&times: 





人 |® 








&sect: 


Rcopy; 





a |® |@ lw |x Iv 


Rreg; 
&etrade: 








3.3 ”设置 段落 的 格式 


在 网 页 制作 的 过 程 中， 将 一 段 文 字 分 成 相应 的 段落 ， 不 仅 可 以 增加 网 页 的 美观 性 ， 而 
上 且 使 网 页 层次 分 明 ， 让 浏览 者 感觉 不 到 拥挤 。 在 网 页 中 ， 如 果 要 把 文字 有 条 理 地 显示 出 来 ， 
离 不 开 段 落 标签 的 使 用 。 在 HTML 中 可 以 通过 段落 标签 实现 段落 的 效果 。 


3.3.1 段落 标签 : <p> 


HTML 标签 中 最 常用 最 简单 的 是 段落 标签 ， 也 就 是 <p></p>， 说 它 常用 ， 是 因为 几乎 所 
有 的 文档 文件 都 会 用 到 这 个 标签 ， 说 它 简单 ， 从 外 形 上 就 可 以 看 出 来 ， 它 只 有 一 个 字母 。 
虽说 是 简单 ， 但 也 非常 重要 ， 因 为 也 是 用 来 区 别 段落 的 。 

基本 语法 : 

<p> 段 沙文 字 </p> 

语法 说 明 : 

段落 标签 可 以 没有 结束 标签 </p>， 而 每 一 个 新 的 段落 标签 开始 的 同时 也 意味 着 上 一 个 
段落 的 结束 。 

实例 代码 : 

<!doctype html> 


<html> 
<head> 








<meta charset="utf-8"> 
<title> 段 落 标记 </title> 
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</head> 

<body> 

<p> 我 们 渐 行 渐 远 的 青春 ! 是 的 , 我 也 仿佛 在 你 的 作品 里 看 到 了 曾经 的 自己 。 面 对 生活 的 压力 ,理想 
曾经 显得 那么 的 苍白 。 他 ， 不 是 个 体 ， 是 多 数 。 走 入 婚姻 ， 走 进 家 庭 ， 时 光 变 成 吸水 的 海绵 ， 负 累 
越 来 越 重 。<p> 曾 经 的 风花雪月 ， 年 少 不 知 悉 滋 味 ， 以 为 可 以 任意 挥霍 的 青春 渐 行 渐 远 了 。 那 么 ， 作 
者 将 给 我 们 带 来 怎样 沉重 的 思考 与 感动 。 非 常 值得 期 待 ! 感谢 一 只 小 猫 对 星河 的 厚爱 ， 愿 你 在 星河 
快乐 。<br /> 

<p> 

</body> 

</html> 


加 粗 部 分 的 代码 为 段落 标签 ， 效 果 如 图 3-4 所 示 。 
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图 3-4 段落 效果 


3.3.2 ”段落 的 对 齐 属性 : align 

默认 情况 下 ,文字 是 左 对 齐 的 。 而 在 网 页 制作 过 程 中 ， 常 常 需要 用 到 其 他 的 对 齐 方式 。 
对 齐 方式 的 设置 要 用 到 align 参数 。 

基本 语法 : 

<align=" 对 齐 方式 "> 

语法 说 明 : 

在 该 语法 中 ，align 属性 需要 设置 在 标题 标签 的 后 面 ， 其 对 齐 方式 的 取 值 见 表 3-2。 


表 3-2 对 齐 方式 

















用 HTML 设置 文字 、 段 沙 与 列表 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 段 落 的 对 齐 属性 </title> 

</head> 

<body> 

在 小 省 儿 的 世界 里 , 她 会 和 蜜蜂 吵架 , 会 看 到 仙女 洗澡 , 会 和 青蛙 王子 跳舞 , 她 喜欢 自由 自在 的 生活 ， 
<P align="right"> 向 往 着 蓝天 、 白 云 ， 像 鸟 儿 一 样 飞翔 。 她 爱 挑剔 ， 会 说 谎 ， 有 着 敏感 多 疑 的 
虚荣 心 ， 还 会 动 些小 聪明 ，</p> 

<p align="center"> 会 大 声 地 说 : “你 好 ， 我 叫 小 省 儿 ， 聪 明 、 美 丽 、 可 爱 的 小 省 儿 。” 
</P> 

</body> 

</html> 


align="right" 是 设置 段落 为 右 对 齐 ，align="center" 是 设置 段落 为 居中 对 齐 ， 在 浏览 器 中 


预览 ， 效 果 如 图 3-5 所 示 。 


Le 





图 3-5 段落 的 对 齐 效果 


3.3.3 不 换行 标签 : <nobr> 


在 网 页 中 如 果 某 一 行 的 文本 过 长 ， 浏 览 器 会 自动 对 这 段 文 字 进 行 换行 处 理 。 可 以 使 用 


<nobr> 标 签 来 禁止 自动 换行 。 


基本 语法 : 

<nobr> 不 换行 文字 </nobr> 

语法 说 明 : 

<nobr> 标 签 用 于 使 指定 的 文本 不 换行 。<nobr> 标 签 之 间 的 文本 不 会 自动 换行 。 
实例 代码 : 


<!doctype html> 
<html> 
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<head> 

<meta charset="utf-8"> 

<title> 不 换行 标记 </title> 

</head> 

<body> 

<nobr> 人 生 的 道路 上 ， 有 孤独 、 莫 伤 和 痛苦 ， 好 在 我 们 总 有 星 的 陪伴 。 愿 每 一 个 孩子 都 找到 那个 勇 
敢 自信 的 自己 ， 愿 美好 的 童话 在 我 们 的 生活 中 长 在 。</nobr> 

</body> 

</html> 


加 粗 部 分 的 代码 为 不 换行 标签 ， 在 浏览 器 中 预览 ， 可 以 看 到 文字 不 换行 一 直 往 后 排 ， 








如 图 3-6 所 示 。 
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3-6 不 换行 效果 


3.3.4 换行 标签 : <br> 


在 HIML 文本 显示 中 ， 默 认 是 将 一 行文 字 连 续 地 显示 出 来 ， 如 果 想 将 一 个 句子 后 面 的 


内 容 在 下 一 行 显示 就 会 用 到 换行 标签 <br>。 换 行 标签 是 个 单 标签 ， 也 叫 空 标签 ， 不 包含 任 
何 内 容 ， 在 HTML 文件 中 的 任何 位 置 只 要 使 用 了 <br> 标 签 ， 当 文件 显示 在 浏览 器 中 时 ， 该 
标签 之 后 的 内 容 将 在 下 一 行 显示 。 


基本 语法 : 

<br> 

语法 说 明 : 

一 个 <br> 标 签 代 表 一 个 换行 ， 连 续 的 多 个 标签 可 以 实现 多 次 换行 。 
实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 换 行 标签 </title> 
</head> 
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<body> 
缓慢 悠长 的 成 长 过 程 中 ， 命 运 之 神 赐予 何以 静 的 礼物 并 不 多 ， 儿 时 的 玩 伴 陈 冉 冉 是 她 收 到 的 最 美好 
礼物 之 一 。<bzr> 虽 然后 来 失散 于 茫 东 人 海 ， 但 她 们 一 直 牢 记者 彼此 的 约定 ， 终 于 在 大 学 校园 里 再 度 
重逢 ，<bzr> 穿 过 命运 的 迷 局 与 爱情 的 雾 障 ， 她 们 还 能 不 忘 初 心 ， 保 持 最 初 的 纯真 吗 ? 

</body> 

</html> 

加 粗 部 分 的 代码 为 设置 换行 标签 ， 在 浏览 器 中 预览 ， 可 以 看 到 换行 的 效果 ， 如 图 3-7 

所 示 。 


司 owmMtrpv+rcss 册 用 -6 | 情夫 三 必 等 
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稻 慢 元 长 的 成 长 过 程 由 ， 命 运 之 神 由 也 何以 圾 的 礼物 并 不 多 ， 儿 时 的 玩 伴 陈 冉冉 
是 她 收 到 的 最 美好 礼物 | 
晶 然 后 来 失 艇 于 花 范 人 海 ， 但 她 们 一 直 牢 记 荐 彼此 的 约定 ， 终 于 在 大 学 校园 里 再 


度 重 译 ， 
罕 这 富 运 的 过 局 与 爱情 的 圭 障 ， 她 们 还 部 不 忘 初 心 ， 保 持 最 初 的 纯真 吗 ? 





3-7 ”换行 效果 


[名 提示 :， <br> 是 唯一 可 以 为 文字 分 行 的 方法 。 其 他 标签 如 <p>， 可 以 为 文字 分 段 。 


3.4 ”水 平 线 标签 


水 平 线 对 于 制作 网 页 的 朋友 来 说 一 定 不 会 陌生 , 它 在 网 页 的 版 式 设计 中 是 非常 有 用 的 
可 以 用 来 分 隔 文本 和 对 象 。 在 网 页 中 常常 看 到 一 些 水 平 线 将 段落 与 段落 隔 开 ， 这 些 水 平 线 
可 以 通过 插入 图 片 实现 ， 也 可 以 通过 更 简单 的 标签 来 完成 。 


3.4.1 插入 水 平 线 标签 : <hr> 


水 平 线 标签 ， 用 于 在 页 面 中 插入 一 条 水 平 标尺 线 ， 使 页 面 看 起 来 整齐 明了 。 
基本 语法 : 

<hr> 

语法 说 明 : 

在 网 页 中 输入 一 个 <hr> 标 签 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 

实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
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<title> 插 入 水 平 线 </title> 

</head> 

<body> 

<h1> 成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 </h1> 

<p>&nbsp; </p> 

<hr> 

<p> 在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 , 不 管 这 些 经 验 是 直接 的 还 是 间接 的 , 都 在 某 种 程度 
上 影响 着 我 们 。 所 以 ， 当 我 们 遇 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 我 们 的 决定 ， 而 我 们 
今天 的 决定 就 会 影响 我 们 的 未 来 。</p> 

</body> 

</html> 


加 粗 部 分 的 代码 为 水 平 线 标签 , 在 浏览 器 中 预览 , 可 以 看 到 插入 的 水 平 线 效果 , 如 图 3-8 





所 示 。 


国 41 插入 水 下 线 : hrhtm| 忆 -| 屋 声 入 水平 线 
文件 月 。 闹 短 日 ”查看 (V) 收藏 交 A) 工具 (T) 帮 动 (H) 


成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 





在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 ， 不 管 这 些 经 验 是 直接 的 还 是 间接 的 ， 
都 在 某 种 程度 上 影响 着 我 们 。 所 以 ， 当 我 们 过 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往 
往 左 右 着 我 们 的 决定 ， 而 我 们 今天 的 决定 就 会 影响 我 们 的 未 来 。 





夸 100% ~ 





3-8 ”插入 水 平 线 效果 


3.4.2 ”设置 水 平 线 宽度 与 高 度 的 属性 : width 、size 


默认 情况 下 , 水 平 线 的 宽度 为 100%, 可 以 使 用 width 属性 手动 调整 水 平 线 的 宽度 。Size 


属性 用 于 改变 水 平 线 的 高 度 。 


基本 语法 : 
<hr width=" 宽 度 "> 
<hr size=" 高 度 "> 


语法 说 明 : 
在 该 语法 中 ， 水 平 线 的 宽度 值 可 以 是 确定 的 像素 值 ， 也 可 以 是 窗口 的 百分比 。 水 平 线 

















的 高 度 只 能 使 用 绝对 的 像素 值 来 定义 。 


BD 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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<title> 设 置 水 平 线 宽度 与 高 度 属性 </title> 

</head> 

<body> 

<p><strong> 成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 </strong></p> 

<hr width="550"size="3"> 

<p> 在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 , 不 管 这 些 经 验 是 直接 的 还 是 间接 的 , 都 在 某 种 程度 
上 影响 着 我 们 。 所 以 ， 当 我 们 遇 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 我 们 的 决定 ， 而 我 们 
今天 的 决定 就 会 影响 我 们 的 未 来 。</p> 

</body> 

</html> 


加 粗 部 分 的 代码 为 设置 水 平 线 的 宽度 和 高 度 ， 在 浏览 器 中 预览 ， 可 以 看 到 将 宽度 设置 


为 550px， 高 度 设 置 为 3px 的 效果 ， 如 图 3-9 所 示 。 


+ ¢| BG ane 
文件 (F) ” 媚 强 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 





在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 ， 不 管 这 些 : 
上 影响 着 我 们 。 所 以 ， 当 我 们 册 到 新 的 事情 需要 判断 
们 今天 的 决定 就 会 影响 我 们 的 未 来 - 






直接 的 还 是 间接 的 ， 都 在 某 种 程度 
经 验 往往 左右 着 我 们 的 决定 ， 而 我 





3-9 设置 水 平 线 参数 


3.4.3 设置 水 平 线 的 颜色 : color 


在 网 页 设计 过 程 中 ， 如 果 随 意 利用 默认 水 平 线 ， 常 常会 出 现 插 入 的 水 平 线 与 整个 网 页 





颜色 不 协调 的 情况 。 设 置 不 同 颜色 的 水 平 线 可 以 为 网 页 增色 不 少 。 


基本 语法 : 

<hr color=" 颜 色 "> 

语法 说 明 : 

颜色 代码 是 十 六 进 制 的 数值 或 者 颜色 的 英文 名 称 。 
实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-=8"> 


<title> 设 置 水 平 线 的 颜色 </title> 
</head> 


HTML+DIV+CSS 网 页 设计 与 布局 买 用 教程 





<body> 

<p> 成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 </p> 

<hr width="550"size="3" color="#CC0000"> 

<p> 在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 , 不 管 这 些 经 验 是 直接 的 还 是 间接 的 , 都 在 某 种 程度 
上 影响 着 我 们 。 所 以 ， 当 我 们 遇 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 我 们 的 决定 ， 而 我 们 
今天 的 决定 就 会 影响 我 们 的 未 来 。</p> 

</body> 

</html> 


加 粗 部 分 的 代码 为 设置 水 平 线 的 颜色 , 在 浏览 器 中 预览 , 可 以 看 到 水 平 线 的 颜色 效果 ， 


如 图 3-10 所 示 。 


装配 水 五 的 昭 色 ; color hhml 月 ”C | 大 设置 水 二 9 各色 
文件 淆 吕 (E] 查看 (V) 收藏 夫 [A) 工具 (T 帮 有 动 (H) 


成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 






在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 ， 不 管 这 些 经 验 是 直接 的 还 是 间接 的 ， 都 在 
某 种 程度 上 影响 着 我 们 。 所 以 ， 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 
我 们 的 决定 ， 而 我 们 今天 的 决定 就 会 影响 我 们 的 未 来 。 











拒 100% ~ 


3-10 水平线 的 颜色 


3.4.4 设置 水 平 线 的 对 齐 方式 : align 


水 平 线 在 默认 情况 下 是 居中 对 齐 的 ， 如 果 想 让 水 平 线 左 对 齐 或 右 对 齐 ， 就 需要 设置 对 


齐 方式 。 


基本 语法 : 

<hr align=" 对 齐 方式 "> 

语法 说 明 : 

在 该 语法 中 ， 对 齐 方 式 可 以 有 3 种 ， 包 括 center、left 和 right， 其 中 center 的 效果 与 默 


认 的 效果 相同 。 


实例 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 设 置 水 平 线 的 对 齐 方式 </title> 











</head> 

<body> 

<p> 成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 </p> 

<hr align="center" width="400"size="2" color="#CC0000"> 

<p> 在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 , 不 管 这 些 经 验 是 直接 的 还 是 间接 的 , 都 在 某 种 程度 
上 影响 着 我 们 。 所 以 ， 当 我 们 遇 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 我 们 的 决定 ， 而 我 们 
今天 的 决定 就 会 影响 我 们 的 未 来 。</p> 

<p><hr width="200" size="2" color="#000000" align="left"> 

所 以 ， 要 想 成 功 就 要 把 “不 可 能 ”的 假设 ， 换 成 “可 能 ”的 假设 。 也 就 是 说 : 成 功 不 是 你 能 不 能 ， 
而 是 你 要 不 要 ! 

<hr align="right" width="200" size="2" color="#999900"> 

<p> 很 多 人 也 是 这 样 ， 在 无 数 次 的 失败 尝试 中 ， 对 很 多 事情 已 经 得 出 结论 ， 于 是 ， 便 放弃 了 。 甚 至 机 
会 真 的 来 的 时 候 ， 他 们 也 不 愿意 试 一 试 。</p> 

</body> 

</html> 


加 粗 部 分 的 代码 表示 设置 水 平 线 的 对 齐 方式 ， 在 浏览 器 中 预览 ， 可 以 看 到 水 平 线 不 同 
对 齐 方式 的 效果 ， 如 图 3-11 所 示 。 





轩 DAHTML+DV+CSSRRIQi 站 -| 请 设 且 TE 方式。 x 
文件 朋 。 震 扩 ( 日 ， 查 大 V) 次 吏 天) 工具 (T) 元 (H) 


成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 





的 相 所 二 四 有 于 己 验 ， 不 管 这 些 经 验 是 直接 的 还 是 间接 的 ， 都 在 
影响 着 我 们 。 当 我 们 遇 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 
， 春 物 ee 响 我 们 的 未 来 - 





我 人 和 


维 ， 到 让 不 可 能 "的 假设 ， 换 成 "可 能 "的 假设 。 也 就 是 说 ， 成 功 不 是 你 能 
很 多 人 也 是 这 样 ， 在 无 数 次 的 失败 兰 试 中 ， os cgigbe baa 于 是 ， 便 放弃 
了 。 其 至 


人 
甚至 机 会 真 的 来 的 时 候 ， 他 们 也 不 原 章 试 一 


要 100% ~ 








图 3-11 设置 水 平 线 的 对 齐 方 式 


3.4.5 ”水 平 线 去 掉 阴 影 : noshade 





默认 的 水 平 线 是 空心 立体 的 效果 ， 可 以 将 其 设置 为 实心 并 且 不 带 阴影 的 水 平 线 。 
基本 语法 ; 

<hr noshade> 

语法 说 明 : 


noshade 是 布尔 值 的 属性 ， 它 没有 属性 值 ， 如 果 在 <hr> 标 签 中 写 上 了 这 个 属性 ， 则 浏览 
器 不 会 显示 立体 形状 的 水 平 线 ， 反 之 若 不 设置 该 属性 ， 则 浏览 器 默认 显示 一 条 立体 形状 带 
有 阴影 的 水 平 线 。 


蔷 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 去 掉 水 平 线 阴影 </title> 

</head> 

<body> 

<p> 成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 </p> 

<hr width="550"size="3"noshade> 

<p> 在 我 们 过 去 的 经 历 中 都 有 正 性 和 负 性 的 经 验 , 不 管 这 些 经 验 是 直接 的 还 是 间接 的 , 都 在 某 种 程度 
上 影响 着 我 们 。 所 以 ， 当 我 们 遇 到 新 的 事情 需要 判断 时 ， 这 些 经 验 往往 左右 着 我 们 的 决定 ， 而 我 们 
今天 的 决定 就 会 影响 我 们 的 未 来 。</p> 

</body> 

</html> 


加 粗 部 分 的 代码 为 设置 无 阴影 的 水 平 线 ， 在 浏览 器 中 预览 ， 可 以 看 到 水 平 线 没有 阴影 
的 效果 ， 如 图 3-12 所 示 。 















过 口 X 
得 Pp-e BaxTR 
|_ 广 HD 六 (三 看 V) 社工 具 T) 大 凤 ( 
成 功 不 是 你 能 不 能 ， 而 是 你 要 不 要 
正 性 和 负 性 不 管 这 些 经 验 是 直接 的 还 是 间接 的 ， 





其 所 以 ， 当 
往 左右 者 我 们 的 决定 ， 而 我 们 今天 的 决 


j 新 的 事情 需要 判断 时 ， 这 些 经 验 往 
定 就 会 影响 我 们 的 未 来 





3-12 设置 无 阴影 的 水 平 线 


3.5 ”使 用 <marquee> 设 置 滚动 效果 


滚动 字幕 的 使 用 使 得 整个 网 页 更 有 动感 ， 显 得 很 有 生气 。 现 在 的 网 站 也 越 来 越 多 地 使 
用 滚动 字幕 来 加 强 网 页 的 互动 性 。 用 JavaScript 编程 可 以 实现 滚动 字幕 效果 用 层 也 可 以 
做 出 非常 漂亮 的 滚动 字幕 。 而 用 HTML 的 <marquee> 深 动 字幕 标签 所 需 的 代码 最 少 ， 确 实 
能 够 以 较 少 的 下 载 时 间 换 来 较 好 的 效果 。 


3.5.1 <marquee> 标 签 及 其 属性 
使 用 <marquee> 标 签 可 以 将 文字 、 图 片 等 设置 为 动态 滚动 的 效果 。 


BD 





基本 语法 : 


<marquee 
aligh=leftlc 
bgcolor=#n 
direction=le 
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enter|right|toplbottom 


ft|right|upldown 


behavior=type 


height=n 
hspace=n 
scrollamount 


= 


Scrolldelay=n 


width=n 
vspace=n 
loop=n> 
语法 说 明 : 
只 要 在 标签 之 间 





添加 要 进行 滚动 的 文字 即 可 。 而 且 可 以 在 标签 之 间 设 置 这 些 文字 的 字 


体 、 颜 色 等 。marquee 标签 属性 见 表 3-3。 


表 3-3 ”marquee 标签 属性 











属性 值 说 明 

elion 文字 滚动 方向 。 滚 动 方向 可 以 包含 4 个 取 值 ， 分 别 为 uD、down、left 和 right， 
它们 分 别 表示 文字 向 上 、 向 下 、 向 左 和 向 右 滚动 
设置 文字 的 滚动 方式 ， 可 以 取 值 scroll、slide、alternate。 

behavior scroll: 循环 滚动 ， 默 认 效果 ; slide: 只 滚动 一 次 就 停止 ，altemate: 来 回 交替 进 
行 滚动 

loop 循环 设置 

scrollamount 滚动 速度 

scrolldelay 滚动 延迟 

bgcolor 滚动 文字 的 背景 设置 

width 、height 滚动 背景 面积 

hspace、vspace 设置 空白 空间 





3.5.2 ”使 用 <marquee> 标 签 插入 滚动 公告 


在 网 页 的 设计 过 程 中 ， 动 态 效 果 的 插入 ， 会 使 网 页 更 加 生动 灵活 、 丰 富 多 彩 。 
<marquee> 标 签 可 以 实现 元 素 在 网 页 中 移动 的 效果 ,以 达到 动感 十 足 的 视觉 效果 。 下面 讲 述 
使 用 <marquee> 标 签 插入 滚动 公告 的 方法 ， 有 具体 操作 步骤 如 下 。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 3-13 所 示 。 

















(2) 打开 代码 视 区 


(3) 在 代码 中 ， 











， 将 光标 置 于 文字 的 前 面 , 输入 代码 “<marquee”， 如 图 3-14 所 示 。 
按 空 格 键 ， 弹 出 <marquee> 的 选项 列表 ， 从 中 选择 behavior， 如 图 3-15 
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所 示 。 
Dw =sn 日 sev SA Ra eo sO ay BOW sa G 
图 3-14 输入 代码 
图 3-15 ”选择 属性 
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(4) behavior 的 值 选择 scroll， 设 置 滚动 显示 的 方式 ， 如 图 3-16 所 示 。 


Ee 











图 3-16 选择 代码 
(5) 按 空格 键 ， 弹 出 <marquee> 的 选项 列表 ， 从 中 选择 direction， 如 图 3-17 所 示 。 


dere a 
EE 








am mmm 


图 3-17 选择 属性 
(6) direction 的 值 选择 up， 设 置 滚动 方向 为 向 下 ， 如 图 3-18 所 示 。 
nae em a 





EE 















图 3-18 设置 滚动 的 方向 
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(7) 按 空格 键 ， 弹 出 <marquee> 的 选项 列表 ， 从 中 选择 scrolldelay， 如 图 3-19 所 示 。 


Pr 三 
| 5 





















图 3-19 选择 属性 
(8) scrolldelay 的 值 选择 S0， 设 置 滚动 速度 。 在 代码 后 面 输入 “>”， 如 图 3-20 所 示 。 


ar s 
ET ry 








图 3-20 输入 “>” 
(9) 在 文字 后 输入 </marquee>， 如 图 3-21 所 示 。 











3-21 输入 </marquee> 





用 HTML 设置 文字 、 段 活 与 列表 
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3-22 ”滚动 效果 








3.6 ”综合 实例 一 一 设置 页 面 文本 及 段落 


文本 的 控制 与 布局 在 网 页 设计 中 占 了 很 大 比例 ， 文 本 与 段落 也 可 以 说 是 最 重要 的 组 成 
部 分 。 本 章 通过 大 量 实例 详细 讲述 了 文本 与 段落 标签 的 使 用 ， 下 面 通过 实例 练习 网 页 文本 


与 段落 的 设置 方法 。 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 3-23 所 示 。 


5 


后 期 草 评 养护 指导 
方便 及 时 的 物流 配送 系统 
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3-23 ”网 页 文档 


(2) 切换 到 代码 视图 ， 在 文字 的 前 面 输入 代码 <font color="#060" face=" 


"size="3">， 设 置 文字 的 颜色 、 字 体 、 大 小 ， 如 图 3-24 所 示 。 
(3) 在 代码 视图 中 ， 在 文字 的 最 后 面 输入 代码 </font>， 如 图 3-25 所 示 。 
(4) 打开 代码 视图 ， 在 文本 中 输入 代码 <br/>， 即 可 将 文字 分 成 相应 的 段落 ， 如 图 3-26 


宋体 


所 示 。 
(5) 在 拆 分 视图 中 , 在 文字 中 相应 的 位 置 输入 &nbsp;&nbsp;, 设置 空格 , 如 图 3-27 所 示 。 


4 醒 
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图 3-24 输入 设置 字体 格式 的 代码 
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图 3-26 输入 段落 标签 
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3-27 ”输入 空格 标记 
(6) 保存 网 页 ， 在 浏览 器 中 预览 效果 ， 如 图 3-28 所 示 。 


忆 p76| xe 
RT MRD HIRT mao 


后 期 草坪 养护 指导 
方便 现时 的 物流 配送 系统 





失 站 ,机 放 somogiees 
也 语 ，Do00-00000000 ” 
乔 一 ， 0090-0000000 








3-28 ”设置 页 面 及 文本 段落 的 效果 


本 章 小 结 


在 各 种 各 样 的 网 页 中 ， 极 少 看 见 没有 文字 的 网 页 ， 文 字 在 网 页 中 可 以 起 到 信息 传递 、 
导航 以 及 交互 的 作用 。 在 网 页 中 添加 文字 并 不 困难 ， 但 主要 问题 是 如 何 编排 这 些 文字 以 及 
控制 这 些 文字 的 显示 方式 ， 让 文字 看 上 去 编排 有 序 、 整 齐 美 观 。 本 章 主 要 讲述 了 设置 文字 
格式 、 设 置 段落 格式 、 设 置 水 平 线 等 知识 。 通 过 对 本 章 的 学 习 ， 读 者 应 对 网 页 中 文字 格式 
和 段落 格式 的 应 用 有 一 个 初步 的 了 解 。 
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练 习 题 


1. 填空 题 


(1) 标题 标签 是 指 HTML 网 页 中 对 文本 标题 所 进行 的 着 重 强调 的 一 种 标签， 
以 标签 设置 文字 依次 减 小 显示 重要 性 的 递减 。 

(2) 是 HTML 文 档 中 最 常见 的 标签 ， 用 来 表示 一 个 段落 的 起 始 。 
段落 标签 可 以 没有 结束 标签 ， 而 每 一 个 新 的 段落 标签 开始 的 同时 也 意味 着 上 一 
个 段落 的 结束 。 

(3) 在 网 页 中 如 果 某 一 行 的 文本 过 长 ， 浏 览 器 会 自动 对 这 段 文字 进行 换行 处 理 。 可 以 
使 用 标签 来 禁止 自动 换行 。 

(4) 标签 代表 水 平分 割 模式 ， 并 会 在 浏览 器 中 显示 一 条 线 。 

(5) 网 页 的 多 媒体 元 素 一 般 包 括 动态 文字 、 动 态 图 像 、 声 音 以 及 动画 等 ， 其 中 最 简单 
的 就 是 添加 一 些 滚动 效果 ， 使 用 标签 可 以 将 文字 设置 为 动态 滚动 的 效果 。 


2. 操作 题 
设置 页 面 文本 及 段落 的 具体 实例 ， 如 图 3-29 所 示 。 











图 3-29 设置 页 面 文本 及 段落 的 效果 
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【学 习 目 标 】 

列表 元 素 是 网 页 设计 中 使 用 频率 非常 高 的 元 素 ， 在 传统 网 站 设计 上 , 无 论 是 新 闻 列 表 ， 
还 是 产品 或 其 他 内 容 ， 均 需要 以 列表 的 形式 来 展现 。 通 过 列表 标签 的 使 用 能 使 这 些 内 容 在 
网 页 中 条 理 清晰 、 层 次 分 明 、 格 式 美观 地 表现 出 来 ， 本 章 将 重点 介绍 列表 标签 的 使 用 。 

本 章 主要 内 容 包 括 : 

(1) 使 用 无 序列 表 ; 

(2) 使 用 有 序列 表 ; 

(3) 列表 条 目 元 素 ; 

(4) 定义 列表 标签 。 


4.1 使 用 无 序列 表 


所 谓 无 序列 表 是 指 列表 中 的 各 个 元 素 在 逻辑 上 没有 先后 顺序 的 列表 形式 。 在 无 序列 表 
中 ,各 个 列表 项 之 间 没 有 顺序 级 别 之 分 , 它 通 常 使 用 一 个 项 目 符号 作为 每 个 列表 项 的 前 级 。 
无 序列 表 主 要 使 用 <ulj>、<dir>、<dl>、<menu>、<1i> 几 个 标签 和 type 属性 。 


4.1.1 无 序列 表 标签 : <ul> 


无 序列 表 (Unordered Lisb 是 一 个 没有 特定 顺序 的 相关 条 目 ( 也 称 为 列表 项 ) 的 集合 , 在 无 
序列 表 中 ， 各 个 列表 项 之 间 属 并 列 关 系 ， 没 有 先后 顺序 之 分 。<ul> 用 于 设置 无 序列 表 。 

基本 语法 : 

<ul> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 





</ul> 

语法 说 明 : 

在 该 语法 中 ，<ul> 和 </ul> 标 签 表 示 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 个 列表 项 的 
开始 。 

实例 代码 : 


<!doctype html> 
<html> 
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<head> 

<meta charset="utf-8"> 
<title> 无 序列 表 标记 </title> 
</head> 

<body> 

<p> 

<b> 旅 游 景 点 </b> 

</p> 

<ul> 

<1i> 国 内 </1i> 
<1i> 国 外 </1i> 
<1i> 摄 影 </1i> 
<1i> 亲 子 </1i> 

</ul> 

</body> 

</html> 


加 粗 部 分 的 代码 用 于 设置 无 序列 表 ， 在 浏览 器 中 浏览 效果 如 图 4-1 所 示 ， 可 以 看 到 列 


表 之 间 没 有 顺序 之 分 。 





J 口 x 
Epiioulhtml P ~ © | BG ERia 
文件 (站 句 颖 (E) 查看 (V) 收藏 交 (A) 工具 (Tm 帮助 (H) 

旅游 景点 
* 国 内 
。 国 外 
摄影 
， 亲 子 

季 100% ~ 








图 4-1 设置 无 序列 表 


4.1.2 设置 无 序列 表 类 型 的 属性 type 


默认 情况 下 ， 无 序列 表 的 项 目 符号 是 @，type 属性 规定 列表 的 项 目 符号 的 类 型 ， 避 免 


列表 符号 的 单调 。 


基本 语法 : 


<ul type=" 符 号 类 型 "> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


</ul> 
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语法 说 明 : 
在 该 语法 中 ， 无 序列 表 其 他 的 属性 不 变 ，type 属性 则 决定 了 列表 项 开始 的 符号 。 它 可 
以 设置 的 值 有 3 个 ， 见 表 4-1。 


表 4-1 无 序列 表 的 项 目 符号 类 型 














类 型 值 
disc( 默 认 值 ) 


circle 


列表 项 目的 符号 





黑色 实心 园 点 “@@” 
空心 贺 轿 “O” 
正方 形 “ 里 ” 








Square 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 设 置 无 序列 表 的 类 型 </title> 
</head> 

<body> 
<p><b> 旅 游 景 点 </b></p> 
<ul type="square"> 
<1i> 国 内 </1i> 
<1i> 国 外 </1i> 
<1i> 摄 影 </1i> 
<11> 亲 于 </1i> 

</ul> 

</body> 

</html> 


加 粗 部 分 的 代码 用 于 设置 无 序列 表 类 型 为 方块 ， 如 图 4-2 所 示 。 


- 0O x 
站 95J9 关 typehtinl ”| 大 设置 无 序列 表 的 类 型 
文件 妨 纺 (E) 吾 看 (V) ” 收 京 夫 (A】 工具 (D。 帮 动 (H) 


旅游 景点 








村 100% > 





图 4-2 无 序列 表 类 型 为 方块 


4.1.3 ”菜单 列表 标签 : <menu> 
<menu> 标 签 可 定义 一 个 菜单 列表 。 菜单 列表 在 浏览 器 中 的 显示 效果 和 无 序列 表 是 相同 


5 帮 
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基本 语法 : 
<menu> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


</menu> 


语法 说 明 : 


的 ，<menu> 标 签 是 成 对 出 现 的 ， 以 <menu> 开 始 ， 至 </menu> 结 束 。 


在 该 语法 中 ，<menu> 和 </menu> 标 志 着 菜单 列表 的 开始 和 结束 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 菜 单列 表 标 签 </title> 
</head> 

<body> 

<b> 景 区 名 称 </b> 

<menu> 

<1i> 八 达 岭 </1i> 
<1i> 和 香山、 植物园 </1i> 
<1i> 颐 和 园 </1i> 
<1i> 故 宫 </1i> 

</menu> 

</body> 

</html> 





加 粗 部 分 的 代码 设置 菜单 列表 ， 在 浏览 器 中 预览 效果 如 图 4-3 所 示 。 











国 | 单列 表 奈 Gmend|html 吕 -CC 展 村 单列 表 奈 从 
文件 ”篇 泌 (E) ”查看 (V) ”收藏 夫 (A) 工具 (D) 邦 动 (H) 
景区 名 称 
。 八 达 岭 
香山 、 植 物 园 
0 园 
故宫 
rm 
图 4-3 菜单 列表 
4.1.4 目录 列表 : <dir> 


BD ss 


目录 列表 用 于 显示 文件 内 容 的 目录 大 纲 ， 通 常 月 








于 设计 一 个 压缩 窗 列 的 列表 ， 





[su 
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示 一 系列 的 列表 内 容 ， 例 如 字典 中 的 索引 或 单词 表 中 的 单词 等 。 列 表 中 每 项 最 多 只 能 有 20 
个 字符 。 通 过 <dir>= 和 <li> 标 答 建 立 目录 列表 。 

基本 语法 : 

<dir> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 








</dir> 


语法 说 明 : 
在 该 语法 中 ，<dir> 和 </dir> 标 志 着 目录 列表 的 开始 和 结束 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 目 录 列 表 </title> 
</head> 

<body> 

<p> 目 录 列 表 </p> 

<dir> 

<1i> 无 序列 表 </1i> 
<1i> 有 序列 表 </1i> 
<1i> 目 录 列 表 </1i> 
</dir> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 目录 列表 , 在 浏览 器 中 预览 , 可 以 看 到 目录 列表 的 效果 , 如 图 4-4 
所 示 。 








- 0O x 
司 14 目录 列表 dirhtm| DC 总 目录 列表 
文件 们 。 篇 妥 (E]) 查看 (V) 收 训 (A) “工具 (帮助 H) 
目录 列表 
* 目录 列表 
*。 目录 列表 
* 目录 列表 
或 100% > 








4-4 “目录 列表 效果 
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4.2 使 用 有 序列 表 


有 序列 表 使 用 编号 ， 而 不 是 项 目 符号 来 编排 项 目 。 列 表 中 的 项 目 采 用 数字 或 英文 字母 
作为 序号 ,通常 各 项 目 间 有 先后 的 顺序 性 。 在 有 序列 表 中 ,主要 使 用 <o]> 和 <li> 两 个 标签 以 
及 type 和 start 属性 。 


4.2.1 有 序列 表 标 签 : <ol> 


有 序列 表 中 各 个 列表 项 使 用 编号 排列 ， 列 表 中 的 项 目 有 先后 顺序 ， 一 般 采 用 数字 或 字 
母 作 为 顺序 号 。 

基本 语法 : 

<ol> 

<1i> 有 序列 表 项 </1i> 

<1i> 有 序列 表 项 </1i> 

<1i> 有 序列 表 项 </1i> 

<1i> 有 序列 表 项 </1i> 

<1i> 有 序列 表 项 </1i> 














</ol> 

语法 说 明 : 

在 该 语法 中 ，<ol> 和 </ol> 标 签 标志 着 有 序列 表 的 开始 和 结束 ， 而 <1i> 和 < 人 > 标签 表示 
这 是 一 个 列表 项 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 有 序列 表 标 签 </title> 
</head> 

<body> <b> 分 类 导航 </b> 
<ol> 

<1i> 主 题 旅 行 </1i> 
<1i> 跟 团 游 </1i> 
<1i> 自 由 行 </1i> 

<1i> 目 的 旅行 </1i> 

</olL> 

</body> 

</html> 


加 粗 部 分 的 代码 是 有 序列 表 , 在 浏览 器 中 预览 , 可 以 看 到 有 序列 表 的 序号 , 效果 如 图 4-5 
所 示 。 


BD = 
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主要 亲生 
2 对 国光 


3 自由 生 
4 县 的 这 行 
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图 4-5 有 序列 表 效 果 


4.2.2 ”有 序列 表 类 型 的 属性 : type 


在 默认 情况 下 ， 有 序列 表 使 用 数字 序号 作为 列表 的 序号 ， 可 以 通过 type 属性 将 有 序列 
表 的 类 型 设置 为 英文 或 罗马 字母 。 

基本 语法 : 

<ol type=" 序 号 类 型 "> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 

<1i> 列 表 项 </1i> 


</o1> 
语法 说 明 : 
有 序列 表 的 序号 类 型 见 表 4-2。 
表 4-2 有 序列 表 的 序号 类 型 

















类 型 值 四 
| 默认 值 。 数 字 有 序列 表 (1、2、3、4) 
按 字母 顺序 排列 的 有 序列 表 ， 小 写 (a、b、c、 中 
A 按 字 母 顺序 排列 的 有 序列 表 ， 大 写 A、B、C、D) 
i 罗马 字母 ， 小 写 (二 说, iv) 
省 罗马 字母 ， 大 写 (L IIL IV) 

实例 代码 : 

<!doctype html> 

<html> 
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<head> 

<meta charset="utf-8"> 
<title> 有 序列 表 的 类 型 </title> 
</head> 

<body> 

<b> 浅 谈 教 师 的 爱 与 责任 ， 主 要 表现 在 以 下 几 个 方面 : </b> 
<ol type="a"> 

<1i> 真 诚 无 私 地 爱 学 生 </1i> 

<1i> 要 对 学 生 心 理 健康 负责 </1i> 
<1i> 严 是 一 种 爱 ， 宽 容 也 是 一 种 爱 </1i> 
<1i> 不 放弃 每 一 个 学 生 </1i> 

</o1> 

</body> 

</html> 


加 粗 的 代码 表示 将 有 序列 表 的 序号 类 型 设置 为 “a”,， 表 


浏览 器 中 浏览 效果 如 图 4-6 所 示 。 


司 秽 二 的 关 弄 ype html 只 -|| 后 有 序列 表 的 类 型 
文件 (有 妨 久 (E) 查看 V) 收藏 二 A) 工具 (T) 帮助 (H) 
浅 谈 教师 的 爱 与 责任 ， 主 要 表现 在 以 下 几 个 方面 ， 
a 真诚 无 私 地 爱 学 生 
8 要 对 学 和 心理 他 康 负责 
是 一 种 爱 ， 宽 容 也 是 一 种 爱 
1 不 和 学 生 


示 使 月 


写 英文 





下 100% > 


图 4-6 设置 有 序列 表 的 序号 类 型 


4.2.3 ”有 序列 表 的 起 始 数值 : start 


默认 情况 下 ， 有 序列 表 从 数字 1 开始 记 数 ， 这 个 起 始 值 通过 start 属性 可 以 调整 ， 并 且 
英文 字母 和 罗马 字母 的 起 始 值 也 可 以 调整 。 


基本 语法 : 


<ol start=" 起 始 数 值 "> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


</o1> 


语法 说 明 : 


日 小 写 英文 





字母 编号 ， 


在 该 语法 中 ， 起 始 数值 只 能 是 数字 ， 但 是 同样 可 以 对 字母 和 罗马 数字 起 作用 。 





在 


第 4 章 ”列表 的 建立 和 使 用 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 有 序列 表 的 起 始 数 值 </tit1le> 
</head> 

<body> 

<b> 浅 谈 教师 的 爱 与 责任 ， 主 要 表现 在 以 下 几 个 方面 : </b> 
<ol type="a" start="3"> 

<1i> 真 诚 无 私 地 爱 学 生 </1i> 

<1i> 要 对 学 生 心 理 健康 负责 </1i> 
<1i> 严 是 一 种 爱 ， 宽 容 也 是 一 种 爱 </1i> 
<1i> 不 放弃 每 一 个 学 生 </1i> 

</o01> 

</body> 

</html> 


加 粗 的 代码 表示 将 有 序列 表 的 起 始 数值 设置 为 从 第 3 个 小 写 英 文字 母 开 始 ， 在 浏览 器 
中 浏览 ， 效 果 如 图 4-7 所 示 。 








- OO x 
站 5 的 起 如 数 曾 starjhtm| 让 ”CC | 司 有 了 列表 的 拒 反 数 簿 x 
文件/ 久久 (查看 (V】 克基 妆 (A) 工具] 帮助 (H) 
羔 痰 教师 的 爱 与 责任 ， 主 要 表现 在 以 下 几 个 方面 : 
< 真诚 无 私 地 爱 学 生 
更 理 健康 负责 
100% ~ 





4-7 设置 有 序列 表 的 起 始 数值 


4.3 ”列表 条 目 元 素 <li> 


除了 对 列表 标签 <ol></ol> 进 行 属性 设置 外 ， 我 们 还 可 以 对 列表 项 标签 <ii></li> 的 属性 
进行 设置 。 
4.3.1 项 目 符号 的 类 型 : type 

使 用 列表 项 标签 <li></i> 的 type 属性 ， 可 以 指定 单个 列表 项 的 符号 或 编号 ， 在 列表 标 


签 <ol></ol> 的 type 属性 和 列表 项 标签 <li></li> 的 type 属性 发 生 冲 突 的 情况 下 ， 所 指定 的 单 
个 列表 项 遵循 <l></i> 的 type 属性 进行 显示 。 
61 | 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 





<meta charset="utf-8"> 

<title> 项 目 符号 的 类 型 属性 </title> 
</head> 

<body> 

<p><strong> 掌 握 2016 年 新 型 农村 合作 医疗 有 关 规 定 ， 现 告知 如 下 : </strong> 
<ol type="A"> 

<1i> 参 合 对 象 和 筹资 标准 : </1i> 

<1i type="1"> 筹 资 时 间 : </1i> 

<1i> 门 诊 医 药 费 补偿 标准 及 结 报 程序 ，</1i> 
<1i> 住 院 医药 费 结 报 程序 及 时 限 : <br /> 
</1i> 

</ol> 

</body> 

</html> 


加 粗 的 代码 type="A" 和 type="1"， 表 示 将 第 2 个 列表 项 的 样式 变 为 阿拉 伯 数 字 “2”， 
在 浏览 器 中 浏览 ， 效 果 如 图 4-8 所 示 。 








一 口 X 
© EE 训 - © | GB 和 3 人 
文件 (F) ” 坊 强 (E) ” 音 看 (V) ”收藏 夫 (A) ”工具 (D) 帮助 (H) 
掌握 2016 年 新 型 农村 合作 医疗 有 关 规 定 ， 现 告知 如 下 : 
A_ 参合 对 象 和 筹资 标准 ， 
2. 筹资 时 间 ， 
C. 门诊 医药 费 补偿 标准 及 结 报 程序 , 
D. 住院 医药 费 结 报 程序 及 时 限 ， 
殷 100% 





4-8 项 目 符号 的 类 型 


4.3.2 条 目 编号 : value 


上 节 列 表 项 标签 的 type 属性 只 能 改变 当前 列表 项 的 项 目 符合 的 样式 ， 并 不 会 改变 其 值 
大 小 ， 而 使 用 列表 项 标签 <li></li> 的 value 属性 ， 可 以 改变 当前 列表 项 的 编号 的 大 小 ， 并 会 
影响 其 后 所 有 列表 项 的 编号 大 小 ， 但 该 属性 只 适用 于 有 序列 表 。 

基本 语法 : 


<ol type="value"> 





BD 。» 
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语法 说 明 : 
type 属性 规定 有 序列 表 的 项 目 符号 的 类 型 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 条 目 编号 属性 </title> 

</head> 

<body> 

<p><strong> 网 页 编辑 软件 : </strong></p> 
<ol type="A"> 

<1i>Microsoft FrontPage 软件 </1i> 

<li value="4">Dreamweaver 网 页 制作 软件 </1i> 
<1i>Flash 动画 制作 软件 </1i> 

<1i>PS (Photoshop) 图 像 处 理 软件 </1i> 
</ol> 

<br /> 

</body> 

</html> 


加 粗 的 代码 中 value="4" 的 值 仍 需 取 阿 拉 伯 数字 “4”， 而 不 能 取 大 写 英文 字母 “D”， 
此 时 尽管 列表 类 型 type="A"， 但 从 第 2 个 列表 项 开始 ， 以 后 的 列表 项 序号 从 字母 “D” 开 
始 编写 ， 在 浏览 器 中 浏览 ， 效 果 如 图 4-9 所 示 。 








半 泪 姬 旦 性 value html ~ C | 登科 目 炳 三 必 性 | 
文件 (及 强 (E) 查看/) 收藏 交 A) 工具 MT) 都 凤 (H) 


网 页 编辑 软件 : 


A、Microsoft FrontPage 软 件 

D. Dreamweaver 网 页 制作 软件 

EE. Flash 动画 制作 软件 

下 . PS (Photoshop) 图 像 处 理 软件 








搞 100% > | 





4-9 ”条目 编号 属性 


4.4 定义 列表 标签 <dl> 


定义 列表 标签 是 一 种 两 个 层次 的 列表 ， 用 于 解释 名 词 的 定义 ，“ 名 词 ”为 第 一 层次 ， 
“解释 ”为 第 二 层次 ， 并 且 不 包含 项 目 符号 。 定 义 列表 也 称 为 字典 列表 ， 因 为 它 与 字典 具 


6 者 
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有 相同 的 格式 。 在 定义 列表 中 ， 每 个 列表 项 带 有 一 个 缩 进 的 定义 字段 ， 就 好 像 字 典 对 文字 
进行 解释 一 样 。 通 过 <dl>、<dt>、<dd> 标 签 建立 定义 列表 。 


基本 语法 : 


<dl> 
<dt>..</dt> 
<dd>...</dd> 
<dd>..</dd> 


<qdt>..</dt> 
<dd>...</dd> 
<dd>..</dd> 


</dl> 


语法 说 明 : 
<dl></dl> 标 签 用 来 创建 定义 列表 ，<dt></d 忆 标签 用 来 创建 列表 中 的 上 层 项 目 ， 此 标签 


只 能 在 <dl></dl> 标 签 中 使 用 ， 显 示 时 <dt></dP> 标 签 定义 的 内 容 将 左 对 齐 。<dd></dd> 标 答 
用 来 创建 列表 中 的 下 层 项 目 , 此 标签 也 只 能 在 <dl></dl> 标 签 中 使 用 ,显示 时 <dd></dd> 标 签 


定 





义 的 内 容 将 相对 于 <dt></dP 标 签 定义 的 内 容 向 右 缩 进 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 定 义 列表 元 素 </title> 

</head> 

<body> 

<p><strong> 招 聘 信息 : </strong> 

<dl> 

<dt> 学 历 要 求 : </dt> 

<dd> 二 类 以 上 工科 院 校 研究 生 (保送 或 公费 研究 生 毕 业 ) ， 且 本 科 为 二 类 以 上 院 校 </dd> 
<dd> 本 科 为 二 本 以 上 院 校 ， 所 学 专业 为 工科 类 相关 专业 ;，</dd> 

<dd> 本 科 为 二 本 以 上 工科 相关 专业 ， 硕 士 为 工程 项 目 管理 相关 专业 者 优先 。</dd> 
<dd>gnbsp;</dd> 

</dl> 

<br /> 

< 

</body> 

</html> 


加 粗 部 分 的 代码 用 <dt></de> 标 签 定义 了 上 层 项 目 “ 招 聘 信息 ”和 “学 历 要 求 ”， 并 用 

















<dd></dd> 标 签 分 别 定义 了 其 相应 的 下 层 项 目 , 它们 之 间 以 缩 进 的 形式 使 得 层次 清晰 , 效果 


如 





队 es 


图 4-10 所 示 。 
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- 0O x 
a EDSEEAEY p+ ¢| ax 
文件 (F) ”篇 强 (E) 查看 (V)】 ”收藏 夫 (A) 工具 (T) 。 帮助 (H) 
招聘 信息 : 
学 历 要 求 ， 
下 妆 队 上 各 的 本 究 生 (保送 世人 车 研 究 生 册 dh) 且 本 科 为 二 类 以 


本 科 为 二 本 以 上 院 校 ， 所 学 专业 为 工科 类 相关 专业 ; 
利和 信介 硕士 为 工程 项 目 管理 相关 专业 者 优 





拒 100% ~ 
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本 章 小 结 


HTML 中 的 列表 元 素 、 列 表 形 式 在 网 站 设计 中 占有 很 大 的 比重 ， 显 示 信 息 非常 整齐 直 
观 ， 便 于 用 户 理解 。 本 章 讲述 了 无 序列 表 、 有 序列 表 、 列 表 条 目 元 素 和 定义 列表 元 素 的 具 
体 使 用 。 


练 习 题 

1. 填空 题 

(1) 所 谓 无 序列 表 是 指 列表 中 的 各 个 元 素 在 逻辑 上 没有 的 列表 形式 。 在 
无 序列 表 中 ， 各 个 列表 项 之 间 没 有 顺序 级 别 之 分 , 它 通常 使 用 一 个 作为 每 个 
列表 项 的 前 级 。 

(2) 有 序列 表 使 用 ， 而 不 是 项 目 符号 来 编排 项 目 。 列 表 中 的 项 目 采用 数字 或 
英文 字母 开头 ， 通 常 各 项 目 间 有 。 在 有 序列 表 中 ， 主 要 使 用 和 
两 个 标记 以 及 type 和 start 属性 。 

2. 操作 题 


根据 本 章 所 学 的 知识 ， 采 用 有 序列 表 技 术 编 写 出 具有 如 图 4-11 所 示 的 运行 效果 的 程序 。 


6 纪 
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第 5 章 用 HTML 创建 精彩 的 图 像 
和 多 媒体 页 面 


【学 习 目 标 】 

图 像 是 网 页 中 不 可 缺少 的 元 素 ， 在 网 页 中 巧妙 地 使 用 图 像 可 以 为 网 页 增色 不 少 。 网 页 
美化 最 简单 、 最 直接 的 方法 就 是 在 网 页 上 添加 图 像 ， 图 像 不 但 使 网 页 更 加 美观 、 形 象 和 生 
动 ， 而 且 使 网 页 中 的 内 容 更 加 丰富 多 彩 。 利 用 图 像 创建 精美 网 页 ， 能 够 给 网 页 增加 生机 ， 
从 而 吸引 更 多 的 浏览 者 。 在 网 页 中 ， 除 了 可 以 插入 文本 和 图 像 外 ， 还 可 以 插入 动画 、 声 音 、 
视频 等 媒体 元 素 ， 如 滚动 效果 、Flash、Applet、ActiveX 及 Midi 声音 文件 等 。 通 过 对 本 章 
的 学 习 ， 读 者 可 以 掌握 多 媒体 文件 的 使 用 ， 从 而 丰富 网 页 的 效果 ， 吸 引 浏览 者 的 注意 。 

本 章 主要 内 容 包括 : 

(1) 网 页 中 常见 的 图 像 格 式 ; 

(2) 插入 图 像 并 设置 图 像 属性 ; 

(3) 添加 多 媒体 文件 ; 

(4) 添加 背景 音乐 ; 

(5) 创建 多 媒体 网 页 ; 

(6) 创建 图 文 混合 排版 网 页 。 


5.1 网 页 中 常见 的 图 像 格式 


每 天 在 网 络 上 交流 的 用 户 数不胜数 ， 因 此 使 用 图 像 格式 一 定 能 够 被 每 一 个 操作 平台 
受 ， 当 前 网 上 流行 的 图 像 格式 通常 以 GIF 和 JPEG 为 主 ， 另 外 还 有 一 种 名 为 PNG 的 文件 格 
式 ， 也 被 越 来 越 多 地 应 用 在 网 络 中 。 下 面 就 对 这 3 种 图 像 格 式 的 特点 进行 介绍 。 


1. GIF 格式 


GIF 是 英文 单词 Graphic Interchange Format 的 缩写 ， 即 图 像 交换 格式 ， 文 件 最 多 可 使 
用 256 种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 
图 标 、 徽 标 或 其 他 具有 统一 色彩 和 色调 的 图 像 。 

GIF 格式 的 最 大 优点 就 是 可 制作 动态 图 像 ， 可 以 将 数 张 静 态 文件 作为 动画 帧 串联 起 来 ， 
转换 成 一 个 动画 文件 。 

GIF 格式 的 另 一 优点 就 是 可 以 将 图 像 以 交错 的 方式 在 网 页 中 呈现 。 所 谓 交 错 显示 ， 就 
是 当 图 像 尚未 下 载 完 成 时 ， 浏 览 器 会 先 以 马赛 克 的 形式 将 图 像 慢 慢 显示 ， 让 浏览 者 可 以 大 
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略 猜 出 下 载 图 像 的 雏形 。 


2. JPEG 格式 








JPEG 是 英文 单词 Joint Photographic Experts Group 的 缩写 ， 它 是 一 种 图 像 压 缩 格式 。 
此 文件 格式 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 ， 这 是 因为 JPEG 文件 可 以 包含 数 百 万 
种 颜色 。 随 着 JPEG 文件 品质 的 提高 ， 文 件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 常 可 以 通 
过 压缩 JPEG 文件 在 图 像 品质 和 文件 大 小 之 间 达 到 良好 的 平衡 。 

JPEG 格式 是 一 种 压缩 的 非常 紧凑 的 格式 ， 专 门 用 于 不 含 大 色 块 的 图 像 。JPEG 图 像 有 
一 定 的 失真 度 ， 但 是 在 正常 的 损失 下 肉眼 分 辨 不 出 JPEG 和 GIF 图 像 的 区 别 ， 而 JPEG 文 
件 的 大 小 只 有 GIF 文件 的 14。 了 PEG 对 图 标 之 类 的 含 大 色 块 的 图 像 不 是 很 有 效 ， 不 支持 透 
明 图 和 动态 图 ， 但 它 能 够 保留 全 真 的 色调 板 格 式 。 如 果 图 像 需要 全 彩 模式 才能 表现 出 效果 
的 话 ，JPEG 就 是 最 佳 的 选择 。 

3. PNG 格式 

PNG(Portable Network Graphics) 图 像 格式 是 一 种 非 破 坏 性 的 网 页 图 像 文件 格式 , 它 提供 
了 将 图 像 文件 以 最 小 的 方式 压缩 却 又 不 造成 图 像 失真 的 技术 。 它 不 仅 具 备 了 GIF 图 像 格式 
的 大 部 分 优点 ， 而 且 还 支持 48 位 的 色彩 、 更 快 地 交错 显示 、 跨 平台 的 图 像 亮度 控制 、 更 多 
层 的 透明 度 设 置 。 








5.2 ”插入 图 像 并 设置 图 像 属性 


我 们 今天 看 到 的 网 页 丰富 多 彩 ， 都 是 因为 图 像 等 多 媒体 的 作用 。 想 一 想 过 去 ， 网 页 全 
部 是 纯 文 本 ， 非 常 枯燥 ， 就 知道 图 像 在 网 页 设计 中 的 重要 性 了 。 在 HTML 页 面 中 可 以 插入 
图 像 ， 并 设置 图 像 的 属性 。 


5.2.1 图 像 标 签 : <img> 


有 了 图 像 文 件 后 ， 就 可 以 使 用 <img> 标 签 将 图 像 插 入 到 网 页 中 ， 从 而 达到 美化 网 页 的 
效果 。<img> 标 签 的 相关 属性 见 表 5-1。 




















表 5-1 图 像 属 性 
属 性 描 述 
sre 图 像 的 源 文件 
alt 提示 文字 
width、height 宽度 和 高 度 
border 边框 
vspace 垂直 间距 
hspace 水 平 间距 
68 
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续 表 
属 性 描 述 
align 对 齐 方 式 
dynsrc 设 定 avi 文件 的 播放 
loop 设 定 avi 文 件 循环 播放 次 数 
loopdelay 设 定 avi 文件 循环 播放 延迟 
start 设 定 avi 文件 播放 方式 
lowsrc 设 定 低 分 辨 率 图 片 
Usemal 映像 地 图 


5.2.2 ”图像 的 源 文件 : src 


<img> 标 签 的 src 属性 是 必需 的 。 它 的 值 是 图 像 文 件 的 URL, 也 就 是 引用 该 图 像 的 文件 


的 绝对 路 径 或 相对 路 径 。 
基本 语法 : 


<img src=" 图 像 文 件 的 地 址 "> 


语法 说 明 : 














该 语法 中 ，src 参数 用 来 设置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 


是 绝对 路 径 。 
实例 代码 : 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 插 入 图 像 </title> 


</head> 
<body> 


<img src="1.jpg" width="614" height="600" /> 


</body> 
</html> 


加 粗 部 分 代码 是 插入 图 像 ， 效 果 如 图 5-1 所 示 。 





HTML+DIV+CSS 网 页 设计 与 布局 买 用 教程 














5-1 插入 图 像 


5.2.3 图像 的 提示 文字 : alt 


alt 属 性 是 一 个 必需 的 属性 ， 它 规定 在 图 像 无 法 显示 时 的 蔡 代 文本 。 

基本 语法 : 

<a alt="value"> 

语法 说 明 : 

<img> 标 签 的 alt 属性 指定 了 蔡 代 文本 ,用 于 在 图 像 无 法 显示 或 者 用 户 禁用 图 像 显示 时 ， 


代替 图 像 显示 在 浏览 器 中 的 内 容 。 


本 


BD mn 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 图 像 的 提示 文字 </title> 

</head> 

<body> 

<img src="3.jpg" width="500" height="356" / alt=" 定 襄 郡 - 房产 " /> 
<img src="2.jpg" width="500" height="356" / ”alt=" 定 襄 郡 - 房产 " /> 
</body> 

</html> 


加 粗 部 分 的 第 1 行 是 图 像 显示 的 时 候 ， 而 第 2 行 是 图 像 不 显示 的 时 候 即 可 显示 蔡 代 文 
如 图 5-2 所 示 。 
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5-2 ”替代 文本 


5.2.4 图像 的 宽度 和 高 度 : width、height 


通过 width 属性 定义 表格 的 宽度 ，height 属性 定义 表格 的 高 度 ， 单 位 是 像素 或 百分比 。 
如 果 是 百分比 ， 则 可 分 为 两 种 情况 : 如 果 不 是 嵌 套 表格 ， 那 么 百分比 是 相对 于 浏览 器 窗口 
而 言 ， 如 果 是 嵌 套 表格 ， 则 百分比 相对 的 是 嵌 套 表格 所 在 的 单元 格 宽度 。 

基本 语法 : 

<img src=" 图 像 文 件 的 地 址 ”width=" 图 像 的 宽度 " height=" 图 像 的 高 度 "> 

语法 说 明 : 

在 该 语法 中 ，height 设置 图 像 的 高 度 ，width 用 来 定义 图 片 的 宽度 ， 如 果 <img> 标 签 不 
定义 宽度 ， 图 片 就 会 按照 它 的 原始 尺寸 显示 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设 置 图 像 高 度 </title> 

</head> 

<body> 

<img src="4.jpg" width="353" height="276"/> 

<img src="4.jpg" width="295"height="209"/> 

</body> 

</html> 


加 粗 部 分 的 代码 第 1 行 是 没有 调整 的 图 像 ， 而 第 2 行 是 调整 后 图 像 的 高 度 和 宽度 ， 在 


和 | 
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浏览 器 中 预览 可 以 看 到 调整 前 后 图 像 的 对 比 ， 如 图 5-3 所 示 。 








司 DAHTML+DIV+CSS 网 iai ”| 大 设 桔 查 你 高 变 
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5-3 ”调整 图 像 的 高 度 


[ 训 提示 : 尽量 不 要 通过 height 和 width 属性 来 缩放 图 像 . 如 果 通 过 height 和 width 属性 
来 缩小 图 像 , 那么 用 户 就 必须 下 载 大 容量 的 图 像 (即使 图 像 在 页 面 上 看 上 去 很 
小 )。 正确 的 做 法 是 ， 在 网 页 上 使 用 图 像 之 前 ， 应 该 通过 软件 把 图 像 处 理 为 合 
适 的 尺寸 。 


5.3 添加 多 媒体 文件 
在 网 页 中 常见 的 多 媒体 文件 包括 声音 文件 和 视频 文件 ， 如 果 能 在 网 页 中 添加 这 些 多 媒 
体 文件 ， 则 可 以 使 单调 的 网 页 变 得 更 加 生动 ， 但 是 如 果 要 正确 浏览 嵌入 这 些 文件 的 网 页 ， 
就 需要 在 客户 端的 计算 机 中 安装 相应 的 播放 软件 。 


5.3.1 添加 多 媒体 文件 标签 : <embed> 
使 用 <embed> 标 签 可 以 将 多 媒体 文件 嵌入 网 页 中 ， 格 式 可 以 是 midi、wav、aiff、 


aa 等 。 
基本 语法 : 
<embed src=" 多 媒体 文件 地 址 ”width=" 多 媒体 的 宽度 " height=" 多 媒体 的 高 度 "></embed> 
语法 说 明 : 
该 语法 中 ，width 和 height 一 定 要 设置 ， 单位 是 像素 ,否则 无 法 正确 显示 播放 多 媒体 的 
软件 。 
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实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


<title> 添 加 多 媒体 文件 标签 </title> 


</head> 

<body> 

<embed src=" shipin.flv" width="500" height="400"></embed> 

</body> 

</html> 

加 粗 部 分 的 代码 是 插入 多 媒体 ， 在 浏览 器 中 预览 插入 的 视频 ， 效 果 如 图 5-4 所 示 。 
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图 5-4 插入 多 媒体 文件 效果 


5.3.2 ”设置 自动 运行 : autostart 


登录 网 页 时 常常 会 看 到 一 些 视频 文件 直接 开始 运行 ， 不 需要 手动 开始 ， 特 别 是 一 些 广 
告 内 容 ， 这 是 通过 autostart 属性 来 实现 的 。 
基本 语法 : 
<embed src=" 多 媒体 文件 地 址 "” autostart =" 是 否 自 动 运 行 " loop =" 是 否 循环 播放 "> 
</embed> 
语法 说 明 : 


该 属性 规定 音频 或 视频 文件 是 否 在 下 载 完 之 后 就 自动 播放 。autostart 的 取 值 有 两 个 : 
一 个 是 ttme， 表 示 自 动 播放 ; 另 一 个 是 false， 表 示 不 自动 播放 。loop 的 取 值 不 是 具体 的 数 
字 ， 而 是 true 或 false， 如 果 取 值 为 tue， 表 示 媒 体 文 件 将 无 限 次 地 循环 播放 ， 而 如 果 取 值 
为 false， 则 只 播放 一 次 。 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设 置 自动 运行 </title> 

</head> 

<body> 

<embed src="images/shanghai .flv"width="250"height="180"autostart="true"> 
</embed> 

<embed src="images/shanghai .flv"width="250"height="180"autostart="false"> 
</embed> 

</body> 

</html> 


加 粗 部 分 的 代码 第 1 行 是 自动 播放 视频 ， 第 3 行 代码 则 是 要 手动 播放 ， 如 图 5-5 所 示 。 
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图 5-5 设置 自动 运行 效果 


5.4 添加 背景 音乐 


许多 有 特色 的 网 页 上 放置 了 背景 音乐 ， 随 网 页 的 打开 而 循环 播放 。 在 网 页 中 加 入 一 段 
i 乐 ， 只 要 用 <bgsound> 标 签 就 可 以 实现 。 








5.4.1 设置 背景 音乐 : <bgsound> 
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在 网 页 中 ， 除 了 可 以 嵌入 普通 的 声音 文件 外 ， 还 可 以 为 某 个 网 页 设置 背景 音乐 。 
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基本 语法 : 
<bgsound src=" 背 景 音乐 的 地 址 ”hidden=" 是 否 隐藏 播放 器 按钮 " autostart=" 是 否 自动 播放 "> 
语法 说 明 : 
sIc 是 音乐 文件 的 地 址 ,可 以 是 绝对 路 径 也 可 以 是 相对 路 径 。 背 景 音乐 的 文件 可 以 是 avi、 
mp3 等 声音 文件 。 
hidden="true" 意思 是 隐藏 播放 器 按钮 ，hidden="false" 则 表示 显示 。 
意思 是 打开 网 页 ， 加 载 完 后 自动 播放 。 





autostart="true, 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<bgsound src="yinyue.mp3" hidden="true" autostart="true"> 
</head> 

<body> 

<img src="5.jpg" width="669" height="433" /> 
</body> 

</html> 


加 粗 部 分 的 代码 是 插入 背景 音乐 ， 在 浏览 器 中 预览 可 以 听 到 音乐 播放 ， 如 图 5-6 所 示 。 
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5-6 设置 背景 音乐 


5.4.2 ”设置 循环 播放 次 数 : loop 
通常 情况 下 ， 背 景 音乐 需要 不 断 地 播放 ， 可 以 通过 设置 loop 来 实现 循环 次 数 的 控制 。 


75 梧 


HTML+DIV+CSS 网 页 设计 与 布局 实用 教程 





基本 语法 : 

<bgsound loop="loop" /> 
语法 说 明 : 

loop 是 循环 次 数 ，-1 是 无 限 循环 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

</head> 

<bgsound src="yinyue.mp3" hidden="true" autostart="true" loop="5"> 
<body> 

<img src="6.jpg" width="1024" height="597" /> 
</body> 

</html> 


加 粗 部 分 的 代码 是 插入 背景 音乐 ， 在 浏览 器 中 预览 ， 可 以 听 到 背景 音乐 循环 播放 5 次 


后 ， 自 动 停止 播放 ， 如 图 5-7 所 示 。 
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5-7 ”背景 音乐 循环 播放 5 次 后 自动 停止 播放 


5.5 插入 Flash 动画 


<embed> 标 签 可 以 用 来 插入 各 种 多 媒体 文件 ， 格 式 可 以 是 midi、wav、aiff、au、 


等 ，Netscape 及 新 版 的 正 都 支持 。<embed> 标 签 用 于 播放 一 个 多 媒体 对 象 。 
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基本 语法 : 

<embed src="url" loop="true | false" autostart="true | false" width=" 多 
媒体 的 宽度 "” height=" 多 媒体 的 高 度 "></embed> 

语法 说 明 : 

src 指定 多 媒体 文件 的 URL， 即 其 路 径 ， 可 以 是 相对 路 径 或 绝对 路 径 。 为 必 选 属性 。 
loop 指定 声音 等 文件 的 循环 播放 次 数 ， 值 为 tue， 可 循环 播放 无 限 次 ， 值 为 false， 只 

播放 一 次 ，false 为 默认 值 。 
autostart 指定 多 媒体 文件 下 载 后 是 否 自动 播放 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 插 入 Flash 动画 </title> 

</head> 

<body> 

<embed src=" 动 画 .swf" width="780" height="400"></embed> 
</body> 

</html> 


加 粗 部 分 的 代码 是 插入 多 媒体 文件 ， 在 浏览 器 中 预览 插入 的 Flash 动画 效果 ， 如 图 5-8 
所 示 。 
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5-8 ”插入 Flash 动画 效果 


5.6 综合 实例 


本 章 主要 讲述 了 网 页 中 常用 的 图 像 格式 及 如 何在 网 页 中 插入 图 像 、 设 置 图 像 属性 、 在 
网 页 中 插入 多 媒体 等 ， 下 面 通过 以 上 所 学 的 知识 讲述 两 个 实例 。 
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综合 实例 1 一 一 创建 多 媒体 网 页 


下 面 将 通过 具体 的 实例 来 讲述 创建 多 媒体 网 页 ， 具 体操 作 步 又 如 下 。 








(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 5-9 所 示 。 
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5-9 网 页 文档 


(2) 打开 拆 分 视图 ， 在 相应 的 位 置 输入 代码 <embed src="i 
height="238"></embed>， 如 图 5-10 所 示 。 
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图 5-10 输入 代码 











(3) 将 光标 置 于 “<head>” 后 面 ， 输 入 背景 音乐 代码 <embed src="images/yinyue.mp3" 





hidden="true" autostart="true" loop="-1">， 设 置 播放 的 次 数 ， 如 区 
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5-11 所 示 。 
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图 5-11 输入 背景 音乐 代码 
(4) 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 如 图 5-12 所 示 。 














图 5-12 预览 效果 


综合 实例 2 一 一 创建 图 文 混合 排版 网 页 


虽然 使 用 各 种 图 片 可 以 使 网 页 显得 更 加 漂亮 ,但 有 时 也 需要 在 图 片 旁 边 添加 一 些 文字 
说 明 。 图 文 混 排 一 般 有 多 种 方法 ， 对 于 初学 者 而 言 ， 可 以 将 图 片 放置 在 网 页 的 左 侧 或 右 侧 ， 
然后 将 文字 内 容 放置 在 图 片 旁边 。 下 面 讲 述 图 文 混 排 的 方法 ， 有 具体 步骤 如 下 。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 5-13 所 示 。 

(2) 打开 拆 分 视图 ， 将 光标 置 于 相应 的 位 置 ， 输 入 图 像 代 码 <img src= 
"images/xianhua.gif'>， 如 图 5-14 所 示 。 

(3) 输入 width="400" height="280"， 设 置 图 像 的 高 和 宽 ， 如 图 5-15 所 示 。 

(4) 输入 hspace="10" vspace="5"， 设 置 图 像 的 水 平 边 距 和 垂直 边 距 ， 如 图 5-16 所 示 。 
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5-15 ”设置 图 像 的 高 和 宽 
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图 5-16 设置 图 像 的 水 平 边 距 和 垂直 边 距 
(5) 输入 border="1"， 用 来 设置 图 像 的 边框 ， 如 图 5-17 所 示 。 
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图 5-17 设置 图 像 的 边框 
(6) 输入 align="left"， 设 置 图 像 的 对 齐 方式 为 左 对 齐 ， 如 图 5-18 所 示 。 














5-18 设置 图 像 的 对 齐 方式 
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(7) 保存 文档 ， 按 Fl12 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 5-19 所 示 。 
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5-19 ”图 文 混合 排版 效果 


本 章 小 结 


在 网 页 中 使 用 图 像 ， 可 以 使 网 页 更 加 生动 和 美观 ， 现 在 很 多 网 页 中 都 可 以 看 到 大 量 的 
图 像 。 本 章 介绍 了 在 网 页 中 插入 多 媒体 的 知识 ， 在 HTML 代码 中 插入 声音 、 视 频 等 。 通 过 
对 本 章 的 学 习 ， 读 者 可 以 了 解 网 页 支持 的 3 种 图 像 格 式 (GIF、JPEG 和 PNG)， 以 及 插入 图 
像 和 设置 图 像 属 性 的 知识 , 读者 应 对 网 页 中 多 媒体 的 应 用 有 一 个 深刻 的 了 解 和 简单 的 运用 ， 
以 便 在 制作 自己 的 网 页 时 利用 这 些 元 素 为 网 页 生 香 添 色 。 





练 习 题 
1. 填空 题 
(1) 属性 是 一 个 必需 的 属性 ， 它 规定 在 图 像 无 法 显示 时 的 替代 文本 。 
(2) 使 用 标签 可 以 将 多 媒体 文件 嵌入 到 网 页 中 。 在 网 页 中 常见 的 多 媒体 文件 
包括 和 


(3) 在 网 页 中 加 入 一 段 背景 音乐 ， 有 时 也 可 以 达到 意 想不到 的 效果 ， 这 只 要 用 
标签 就 可 以 实现 .通常 情况 下 ， 背 景 音乐 需要 不 断 地 播放 ， 可 以 通过 设置 
来 实现 循环 次 数 的 控制 。 


2. 操作 题 
在 网 页 中 插入 图 像 并 设置 图 像 属性 ， 如 图 5-20 所 示 。 


BD »» 























5-20 ”在 网 页 中 插入 图 像 
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【学 习 目标 】 

超 链 接 是 HTML 文档 的 最 基本 特征 之 一 。 超 链接 的 英文 名 是 hyperlink， 它 能 够 让 浏览 
者 在 各 个 独立 的 页 面 之 间 方 便 地 跳 转 。 每 个 网 站 都 是 由 众多 的 网 页 组 成 的 ， 网 页 之 间 通 常 
都 是 通过 链接 的 方式 相互 关联 的 。 

本 章 主要 内 容 包 括 : 

(1) 超 链 接 的 基本 概念 ; 

(2) 创建 基本 超 链接 ; 

(3) 创建 图 像 的 超 链接 ; 

(4) 创建 锚 点 链接 ; 

(5) 创建 外 部 链接 。 


6.1 超 链接 的 基本 概念 


超 链接 是 网 页 中 最 重要 的 元 素 之 一 , 是 从 一 个 网 页 或 文件 到 另 一 个 网 页 或 文件 的 链接 ， 
包括 图 像 或 多 媒体 文件 ， 还 可 以 指向 电子 邮件 地 址 或 程序 。 在 网 页 上 加 入 超 链接 ， 就 可 以 
把 Intemet 上 众多 的 网 站 和 网 页 联系 起 来 ， 构 成 一 个 有 机 的 整体 。 

超 链 接 由 源 地 址 文件 和 目标 地 址 文件 构成 ， 当 访问 者 单 击 超 链接 时 ， 浏 览 器 会 从 相应 
的 目标 地 址 检索 网 页 并 显示 在 浏览 器 中 。 如 果 目 标 地 址 不 是 网 页 而 是 其 他 类 型 的 文件 ， 浏 
览 器 会 自动 调用 本 机 上 的 相关 程序 打开 所 访问 的 文件 。 

链接 由 以 下 3 个 部 分 组 成 。 

(1) 位 置 点 标签 <a>: 将 文本 或 图 片 标识 为 链接 。 

(2) 属性 hre 全 ": 放 在 位 置 点 起 始 标记 中 。 

(3) 地 址 ( 称 为 URL): 浏览 器 要 链接 的 文件 。URL 用 于 标识 Web 或 本 地 磁盘 上 的 文件 
位 置 ， 这 些 链 接 可 以 是 指向 某 个 HTML 文档 ， 也 可 以 指向 文档 引用 的 其 他 元 素 ， 如 图 形 、 
脚本 或 其 他 文件 。 








6.2 创建 基本 超 链接 


超 链接 的 范围 很 广泛 ， 利 用 它 不 仅 可 以 进行 网 页 间 的 相互 链接 ， 还 可 以 使 网 页 链接 到 
相关 的 图 像 文 件 、 多 媒体 文件 及 应 用 程序 等 。 
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6.2.1 超 链接 标签 
馈 链 接 标签 <a> 在 HIML 中 既 可 以 作为 一 个 跳 转 到 其 他 页 面 的 链接 ， 也 可 以 作为 “ 埋 
设 ” 在 文档 中 某 处 的 一 个 “ 锚 定位 ”。<a> 也 是 一 个 行内 元 素 , 它 可 以 成 对 出 现在 一 段 HTML 
代码 的 任何 位 置 。 

基本 语法 : 

<a 属性 =" 链 接 目标 "> 链接 显示 文本 </a> 

语法 说 明 : 

在 该 语法 中 ，<a> 标 签 的 属性 值 见 表 6-1。 

表 6-1 <a> 标 签 的 属性 














属 性 说 明 

href 指定 链接 地 址 
name 给 链接 命名 
title 给 链接 添加 提示 文字 
target 指定 链接 的 目标 窗口 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 超 链接 标签 </title> 

</head> 

<body> 


<p><a href="1"> 行 业 资讯 </a></p> 

<p><a href="2"> 高 速 路 灯光 照明 -为 什么 高 速 不 设 路 灯 ? 2016-09-03</a> 
<br> 

<a href="3"> 生 存 -发 展 -壮大 ，LED 照明 大 众 品 牌 市 场 . .2016-</a> 

<a href="2">09-02</a> 

<br> 

<a href="index2 .html"> 博 物 馆 照明 -- 不 能 忘却 的 记忆 </a><a href="3">.2016-</a> 
<a href="2">09-01</a> 

<br> 

<a href="6"> 走 下 坡 路 或 关闭 的 照明 企业 2016-08-30</a> 

<br> 

</p> 

</body> 

</html> 


加 粗 部 分 的 代码 为 设置 文档 中 的 超 链接 , 在 浏览 器 中 预览 可 以 看 到 超 链 接 效 果 , 如 图 6-1 


所 示 。 
85 可 
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图 6-1 超 链 接 效果 


6.2.2 ”设置 目标 窗口 


在 创建 网 页 的 过 程 中 , 默认 情况 下 超 链 接 在 原来 的 浏览 器 窗口 中 打开 , 可 以 使 用 target 
属性 来 控制 打开 的 目标 窗口 。 
基本 语法 : 
<a href=" 超 链接 目标 ”target=" 目 标 窗口 的 打开 方式 "> 
语法 说 明 : 
在 该 语法 中 ，target 参数 的 属性 有 4 种 ， 见 表 6-2。 
表 6-2 target 参数 的 属性 











属性 值 含义 
_self 在 当前 页 面 中 打开 超 链 接 
_blank 在 一 个 全 新 的 空白 窗口 中 打开 超 链接 
_top 在 顶层 框架 中 打开 超 链接 ， 也 可 以 理解 为 在 根 框架 中 打开 超 链接 
_parent 在 当前 框架 的 上 一 层 里 打开 超 链接 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 超 链接 标签 </title> 

</head> 

<body> 


<p><a href="1"> 行 业 资 讯 </a></p> 
<p><a href="2"> 高 速 路 灯光 照明 -为 什么 高 速 不 设 路 灯 ? 2016-09-03</a><br> 
<a href="3"> 生 存 -发 展 - 壮 大 ，LED 照明 大 众 品牌 市 场 . .2016-09-02</a><br> 
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<a href="6.2.1 超 链 接 标记 .html" target=" blank"> 博 物 馆 照明 -- 不 能 忘却 的 记 
忆 .2016-09-01</a><br> 

<a href="6" > 走 下 坡 路 或 关闭 的 照明 企业 2016-08-30</a><br> 

</p> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 内 部 超 链接 的 目标 窗口 ， 在 浏览 器 中 预览 设置 超 链接 的 对 象 ， 
单 击 时 可 以 打开 一 个 新 的 窗口 ， 如 图 6-2 所 示 。 
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图 6-2 设置 超 链接 目标 窗口 


6.3 创建 图 像 超 链接 


图 像 的 超 链接 和 文字 的 超 链接 方法 是 一 样 的 ， 都 是 用 <a> 标 签 来 完成 ， 只 要 将 <img> 标 
签 放 在 <a> 和 </a> 之 间 就 可 以 了 。 用 作 图 像 超 链接 的 图 片上 有 蓝 色 的 边框 ， 这 个 边框 颜色 也 
可 以 在 <body> 标 签 中 设 定 。 


6.3.1 设置 图 像 超 链 接 


设置 普通 图 像 超 链 接 的 方法 非常 简单 ， 可 通过 <a></a> 标 签 来 实现 。 
基本 语法 : 

<a href=" 链 接 目 标 "> 链 接 的 图 像 </a> 

语法 说 明 : 

给 图 像 添加 超 链接 ， 使 其 指向 其 他 的 网 页 或 文件 ， 这 就 是 图 像 超 链接 。 
实例 代码 : 


<!doctype html> 
<html> 
<head> 














<meta charset="utf-8"> 
<title> 设 置 图 像 超 链接 </title> 
</head> 
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<body> 


</body> 
</html> 


在 网 页 中 我 们 经 


代码 中 加 粗 部 分 是 为 图 像 添 加 空 链 接 ， 在 浏览 器 中 预览 
像 上 时 ， 鼠 标 指针 会 发 生 相 应 的 变化 ， 如 图 6-3 所 示 。 








图 6-3 ”图像 超 链接 的 效果 
常 看 到 一 些 图 像 超 链接 ， 如 图 6-4 所 示 。 





图 6-4 网 页 上 的 图 像 超 链接 


6.3.2 ”设置 图 像 热 区 链接 
图 像 整 体 可 以 是 一 个 超 链接 的 载体 ， 而 且 图 像 中 的 一 部 分 或 多 个 部 分 也 可 以 分 别 成 为 


不 同 的 链接 ， 就 是 图 
的 热点 区 域 。 


基本 语法 : 








像 的 热 





区 链接 。 图 像 链接 








i 





f 的 是 图 像 ， 而 热点 链接 单 和 





和 的 是 


<a href="index.html"><img src="1.jpg" width="650" height="496" alt=""/></a> 


当 和 鼠标 指针 放置 在 链接 的 图 











图 像 中 
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<img usemap="# 热 区 名 称 "> 
<map name=" 热 区 名 称 "> 


Saji 

语法 说 明 : 

在 <area> 标 签 中 定义 了 热 区 的 位 置 和 链接 , 其 中 shape 参数 用 来 定义 热 区 形状 , 热点 的 
形状 包括 rect( 矩 形 区 域 )、circle( 椭 圆 形 区 域 ) 和 poly( 多 边 形 区 域 )3 种 ， 对 于 复杂 的 热点 图 
像 可 以 选择 多 边 形 工具 来 进行 绘制 。coords 参数 则 用 来 设置 区 域 坐标 ， 对 于 不 同形 状 来 说 ， 
coords 设置 的 方式 也 不 同 。 

实例 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<img src="3.jpg" alt="" width="951" height="536" usemap="#Map"/> 

<map name="Map"> 
<area shape="rect" coords="150,22,204,133" href="#1"> 
<area shape="rect" coords="230,16,311,136" href="#2"> 
<area shape="rect" coords="669,20,742,140" href="#3"> 
<area shape="rect" coords="768,18,837,138" href="#4"> 
<area shape="rect" coords="870,21,941,136" href="#5"> 

</map> 

</body> 

</html> 


加 粗 部 分 的 代码 中 name="Map" 和 shape="rect"， 表 示 将 热 区 的 名 称 设置 为 Map， 热 点 
形状 设置 为 rect( 矩 形 区 域 )， 并 分 别 设置 了 热 区 的 区 域 坐 标 和 超 链 接 目标 ， 如 图 6-5 所 示 。 






























































Re 











图 6-5 设置 图 像 的 热 区 链接 效果 


so 多 
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6.4 创建 锚 点 链接 


在 网 站 中 经 常会 有 一 些 文档 页 面 由 于 文本 或 者 图 像 内 容 过 多 ， 导 致 页 面 过 长 。 访 问 者 
需要 不 停 地 拖 动 浏览 器 上 的 滚动 条 来 查看 文档 中 的 内 容 。 为 了 方便 用 户 查 看 文档 中 的 内 容 ， 
在 文档 中 需要 进行 锚 点 链接 。 


6.4.1 创建 锚 点 


锚 点 就 是 指 在 给 定名 称 的 一 个 网 页 中 的 某 一 位 置 , 在 创建 锚 点 链接 前 首先 要 建立 锚 点 。 

基本 语法 : 

<a name=" 锚 点 名 称 "></a> 

语法 说 明 : 

利用 锚 点 名 称 可 以 链接 到 相应 的 位 置 。 这 个 名 称 只 能 包含 小 写 ASCII 和 数字 ， 且 不 能 
以 数字 开头 ， 同 一 个 网 页 中 可 以 有 无 数 个 锚 点 ， 但 是 不 能 有 相同 名 称 的 两 个 锚 点 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
body { 
background-color: #81F13C; 








} 
</style> 
</head> 
<body> 
<table width="800" border="0" align="center" cellpadding="3" 
cellspacing="3"> 
<tbody> 
< 
<td style="font-size: 36px; text-align: center; "> 桃源 科技 </td> 
EE 
<tr> 
<tq style="font-size: 18px"><strong>1 .公司 简介 2 .企业 文化 3 . 发展 策略 
</strong></td> 
<WET> 
必用 
<td valign="top" style="font-size: 16px"><p><strong><p> 
<a name="gongsijianjie"></a> 一 、 公 司 简 介 </p></strong></p> 
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<Dp> <span style="font-size: 16px"><span style="font-size: 14px"> 
公司 业务 履 盖 城 市 交通 、 公 路 交通 、 轨 道 交通 、 民 航 等 领域 ，“ 大 交通 ”产业 布局 已 经 形成 ， 是 国 
内 唯一 一 家 综合 型 交通 运输 信息 化 企业 ;公司 以 大 数据 为 驱动 、 移 动 互联 网 为 载体 ， 已 实现 公司 定 
位 从 智能 交通 向 “互联 网 +” 大 潮 下 的 智慧 交通 转变 、 公 司 角色 从 产品 提供 商 向 运营 服务 商 的 转变 。 
公司 兼 具 从 软件 定制 、 研 发 到 硬件 生产 、 销 售 再 到 系统 集成 、 整 合 的 能 力 ， 形 成 覆盖 从 产品 到 服务 
再 到 解决 方案 的 智能 交通 全 产业 链 : 不 断 完善 项 目 建设 型 和 投资 运营 型 业务 布局 , 持续 丰富 2G、2B、 
2C 产品 线 ， 积 极 打造 “ 千 方 出 行 ”品牌 ， 提 升 公司 运营 和 服务 能 力 。 今 后 ， 公 司 将 充分 利用 资本 平 
台 、 技 术 和 成 果 转 化 平台 ， 在 公交 电子 站 牌 、 智 慧 停车 、 汽 车 电子 标识 、 全 国 客运 联网 售票 服务 平 
台 、 民 航 出 行 信息 服务 等 领域 积极 实现 产品 创新 与 突破 。<br> 

<br> 
公司 尤其 注重 高 端 人 才 的 培养 和 引进 ， 以 及 先进 技术 的 集成 和 创新 ， 积 极 推动 校 企 合作 ， 与 多 

所 大 学 、 学 院 签署 协议 或 达成 意向 ， 在 人 才 培 养 、 项 目 合作 、 技 术 研发 等 方面 展开 合作 ， 探 讨 人 才 
培养 长 效 机 制 。</span></span></p> 

<p> <span style="/* [disabled]font-size: 14px; */"> 传 承 中 国 钢 研 科 
技 集团 有 限 公司 60 年 的 科研 实力 ， 公 司 建立 了 以 “创新 、 创 誉 、 创 利 ” 为 目标 的 技术 创新 体系 ， 拥 
有 一 支 以 7 名 中 国 工程 院 院士 、60 余 位 博士 为 核心 的 研发 团队 。 公 司 共 荣 获 国家 发 明 奖 、 科技 
进步 奖 及 省 部 级 以 上 奖励 82 项 , 全 国 科技 大 会 奖 42 项 , 授权 专利 220 项 。 公 司 企业 技术 中 心 是 首 
批 国 家 认定 企业 技术 中 心 ， 设 有 4 个 国家 级 ，14 个 省 、 市 级 工程 技术 研究 中 心 /实验 室 和 博士 后 科 
研 工作 站 ， 并 与 清华 大 学 、 浙 江 大 学 、 中 科 院 等 高 校 、 科 研 院 所 及 海外 知名 企业 建立 了 “先进 材料 
研究 与 开发 战略 合作 ”伙伴 关系 。 公 司 承 担 并 建设 完成 多 项 国家 重点 项 目 ， 取 得 了 显著 的 社会 和 经 
济 效益 。<br> 

</span></p> 

<p><strong><a name="wenhua"></a> 二 、 企 业 文化 </strong></p> 
<p> <span style="font-size: 16px"> 安 全 : 坚守 安全 基石 ， 领 导 安全 品质 。 


</span></p> 

<p><span style="font-size: 16px"> 高 效 : 全 面 精准 效率 ， 敏 锐 实时 跟 
进 。</span></p> 

<p><span style="font-size: 16px"> 专业 : 专注 行业 安全 ， 专 业 铸造 辉 
煌 。</span></p> 

<p><span style="font-size: 16px"> 创新 : 感悟 辉煌 文化 ， 再 创 科技 新 


高 。</span></p> 
<p> ”愿景 : 行业 的 标杆 ， 企 业 的 楷模 ， 人 才 的 圣地 。<br> 


ye 为 客户 提供 绿色 、 优质 、 高 性 价 比 的 产品 和 服务 , 让 人 类 享受 更 美好 的 生活 。<br> 
ee 尊重 、 诚 信 、 创 新 ， 成 就 客户 、 成 就 企业 、 成 就 员工 。<br> 
fe 不 一 定做 500 强 ， 要 做 500 年 ， 基 业 长 青 ， 永 续 经 营 。<br> 
a 事 无 艰难 ， 何 需 人 杰 ; 败 则 拼死 相 救 ， 成 则 举 杯 相 庆 。 <br> 

</p> 


<p><strong><a name="fazhan"></a> 三 、 发 展 策略 </strong></P> 
<p> <span style="font-size: 16px">2015 年 获得 信息 技术 服务 运行 维护 标准 
二 级 证 书 <br> 
<br> 
2014 年 北京 国 铁路 阳 技 术 有 限 公司 成 为 公司 全 资 子 公司 <br> 
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1 <br> 
2013 年 公司 有 效 专利 突破 100 项 <br> 
1 <br> 
' 2012 年 通过 ISO 20000 体系 认证 <br> 
! <br> 
| 2011 年 通过 职业 健康 安全 管理 体系 认证 、 环 境 管理 体系 认证 <br> 
1 <br> 
| 2010 年 “辉煌 牌 ” 获 得 河南 省 著名 商标 <br> 
1 <br> 
| 2010 年 获得 铁路 施工 三 级 资质 <br> 
1 <br> 
! 2010 年 获得 计算 机 信息 系统 集成 企业 资质 证 书 一 级 资质 </span></p></tq> 
1 </tr> 
， </tbody> 
</table> 
<p>&nbsp; </p> 
</body> 
</html> 
加 粗 部 分 的 代码 是 创建 的 锚 点 ， 在 浏览 器 中 预览 效果 ， 如 图 6-6 所 示 。 
360 安 全 浏 中 芋 81 一 | 口 | XxX 
© 专 | C | 分 日 hley//FV 正 在 写 的 书 队 奥 军 书简 HTML+DIV+CSS 阿 DIS 计 与 布局 交 用 手册 乡 |v .i | 











6 有 ” 口 了 口 和 图 到 一 下 肌 淘 守 特 二 国 天 沿 南 由 沪 BR- 国 PIR -加 
Db ©O | Dmmms | 5 Faxtu ~ |+ 
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6-6 ”创建 锚 点 


6.4.2 ” 锚 点 链接 


建立 了 锚 点 以 后 ， 就 可 以 创建 到 锚 点 的 超 链 接 ， 需 要 用 “#” 号 以 及 锚 点 的 名 称 作为 
href 属性 值 。 
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基本 语法 : 

<a href="# 锚 点 的 名 称 ">…</a> 

语法 说 明 : 

在 该 语法 中 ， 在 href 属性 后 输入 页 面 中 创建 的 锚 点 名 称 ， 可 以 链接 到 页 面 中 不 同 的 
位 置 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<style type="text/css"> 

body { 


background-color: #81F13C; 
} 
</style> 
</head> 
<body> 
<table width="800" border="0" align="center" cellpadding="3" 
cellspacing="3"> 
<tbody> 
<tr> 
<td style="font-size: 36px; text-align: center; "> 桃源 科技 </td> 
EE 
<tr> 
<td style="font-size: 18px"><strong><a href="#gongsijianjie">1 .公司 简 
介 </a>2<a href="#wenhua">. 企 业 文化 3</a>.<a href="#fazhan"> 发 展 策略 </a> 
</strong></td> 
</tr> 
<tr> 
<td valign="top" style="font-size: 16px"><p> 
<strong><p><a name="gongsijianjie"></a> 一 、 公 司 简介 </p></strong></p> 
<p> <span style="font-size: 14px"> 公 司 业务 覆盖 城市 交通 、 公 路 交通 、 轨 道 
交通 、 民 航 等 领域 ， “大 交通 ”产业 布局 已 经 形成 ， 是 国内 唯一 一 家 综合 型 交通 运输 信息 化 企业 ; 
公司 以 大 数据 为 驱动 、 移 动 互 联网 为 载体 ， 已 实现 公司 定位 从 智能 交通 向 “互联 网 +” 大 潮 下 的 智慧 
交通 转变 、 公 司 角色 从 产品 提供 商 向 运营 服务 商 的 转变 。 公 司 兼 具 从 软件 定制 、 研 发 到 硬件 生产 、 
销售 再 到 系统 集成 、 整 合 的 能 力 ， 形 成 覆盖 从 产品 到 服务 再 到 解决 方案 的 智能 交通 全 产业 链 ， 不 断 
完善 项 目 建设 型 和 投资 运营 型 业务 布局 ， 持 续 丰 富 26、2B、2C 产品 线 ， 积 极 打造 “ 千 方 出 行 ” 品 
牌 ， 提 升 公司 运营 和 服务 能 力 。 今 后 ， 公 司 将 充分 利用 资本 平台 、 技 术 和 成 果 转化 平台 ， 在 公交 电 
子 站 牌 、 智 慧 停车 、 汽 车 电子 标识 、 全 国 客 运 联 网 售票 服务 平台 、 民 航 出 行 信息 服务 等 领域 积极 实 
现 产 品 创新 与 突破 。<br> 
<br> 
公司 尤其 注重 高 端 人 才 的 培养 和 引进 ， 以 及 先进 技术 的 集成 和 创新 ， 积 极 推动 校 企 合作 ， 与 多 
所 大 学 、 学 院 签署 协议 或 达成 意向 ， 在 人 才 培 养 、 项 目 合作 、 技 术 研发 等 方面 展开 合作 ， 探 讨 人 才 
培养 长 效 机 制 。</span></p> 
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<p> <span style="/* [disabled]font-size: 14px; */"> 传 承 中 国 钢 研 科 
技 集团 有 限 公司 60 年 的 科研 实力 ， 公 司 建立 了 以 “创新 、 创 誉 、 创 利 ” 为 目标 的 技术 创新 体系 ， 拥 
有 一 支 以 7 名 中 国 工程 院 院士 、60 余 位 博士 为 核心 的 研发 团队 。 公 司 共 荣 获 国家 发 明 奖 、 国 家 科技 
进步 奖 及 省 部 级 以 上 奖励 82 项 ,全国 科技 大 会 奖 42 项 ,授权 专利 220 项 。 公 司 企业 技术 中 心 是 首 
批 国家 认定 企业 技术 中 心 ， 设 有 4 个 国家 级 ，14 个 省 、 市 级 工程 技术 研究 中 心 /实验 室 和 博士 后 科 
研 工作 站 ， 并 与 清华 大 学 、 浙 江 大 学 、 中 科 院 等 高 校 、 科 研 院 所 及 海外 知名 企业 建立 了 “先进 材料 
研究 与 开发 战略 合作 ”伙伴 关系 。 公 司 承 担 并 建设 完成 多 项 国家 重点 项 目 ， 取 得 了 显著 的 社会 和 经 
济 效益 。</span></p> 
<p><span style="/* [disabled]font-size: 14px; */"><br> 
</span></p> 
<p><strong><a name="wenhua"></a> 二 、 企 业 文化 </strong></p> 
<p> 安全 : 坚守 安全 基石 ， 领 导 安全 品质 。</p> 
<p> 高 效 : 全 面 精准 效率 ， 敏 锐 实时 跟 进 。</p> 
<p> 专业 : 专注 行业 安全 ， 专 业 铸造 辉煌 。</P> 
<p> 创新 :感悟 辉煌 文化 ， 再 创 科技 新 高 。</p> 
<p> 愿景 : 行业 的 标杆 ， 企 业 的 楷模 ， 人 才 的 圣地 。<br> 


<br> 
使 命 ， 为 客户 提供 绿色 、 优 质 、 高 性 价 比 的 产品 和 服务 ， 让 人 类 享受 更 美好 的 生活 。<br> 
<br> 
核心 价值 观 : 尊重 、 诚 信 、 创 新 ， 成 就 客户 、 成 就 企业 、 成 就 员工 。<br> 
<br> 
多 文化 : 不 一 定做 500 强 ， 要 做 500 年 ， 基 业 长 青 ， 永 续 经 营 。<br> 
<br> 
狼 精 神 : 事 无 艰难 ， 何 需 人 杰 : 败 则 拼死 相 救 ， 成 则 举 杯 相 庆 。 </p> 
<p><br> 
</p> 


<p><strong><a name="fazhan"></a> 三 、 发 展 策略 </strong></p> 
<p> <span style="font-size: 16px">2015 年 获得 信息 技术 服务 运行 维护 标准 


二 级 证 书 <br> 
<br> 
2014 年 北京 国 铁路 阳 技 术 有 限 公 司 成 为 公司 全 资 子 公司 <br> 
<br> 
2013 年 公司 有 效 专利 突破 100 项 <br> 
<br> 
2012 年 通过 ISO 20000 体系 认证 <br> 
<br> 
2011 年 通过 职业 健康 安全 管理 体系 认证 、 环 境 管理 体系 认证 <br> 
<br> 
2010 年 “辉煌 牌 ”获得 河南 省 著名 商标 <br> 
<br> 
2010 年 获得 铁路 施工 三 级 资质 <br> 
<br> 
2010 年 获得 计算 机 信息 系统 集成 企业 资质 证 书 一 级 资质 </span></p></td> 
hEr> 
</tbody> 
</table> 
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<p>&nbsp; </p> 
</body> 
</html> 
加 粗 部 分 的 代码 为 设置 锚 点 链接 ， 在 浏览 器 中 预览 ， 单 击 创建 的 锚 点 链接 ， 如 图 6-7 
所 示 ， 可 以 链接 到 相应 的 位 置 ， 如 图 6-8 所 示 。 
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6-7 ” 单 击 锚 点 链接 
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6-8 ”链接 到 相应 的 位 置 


6.5 外 部 链接 


网 页 中 的 链接 可 以 分 为 文本 超 链接 、 电 子 邮 件 超 链 接 、 图 像 超 链接 、 锚 点 超 链 接 等 。 


本 节 就 来 讲述 如 何 使 用 各 种 超 链 接 建 立 各 个 页 面 之 间 的 关联 。 
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6.5.1 链接 到 外 部 网 站 


单 击 链接 可 以 从 一 张 页 面 跳 转 到 另 一 张 页 面 。 
基本 语法 : 


<a href="url">Link text</a> 

语法 说 明 : 

开始 标签 和 结束 标签 之 间 的 文字 被 作为 超 链接 来 显示 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<a href="http://www.baidu.com/" target="_blank"> 搜 索 网 站 </a> 
</body> 

</html> 


加 粗 部 分 的 代码 是 链接 到 网 站 ， 在 浏览 器 中 预览 效果 如 图 6-9 所 示 。 


装 DAHTML+DIV+CSSR DD > 0 | 名 天 5 要 六 林 x | 
文件 (站 ” 注 强 (E) 查看 (V) 收藏 交 (A) 工具 (mT 帮助 (H 
搜索 购 站 
Eo 
hapyWwwwbaiducory 可 10085 





6-9 ”链接 到 网 站 


6.5.2 ”链接 到 E-Mail 


HTML 使 用 超 链接 与 网 络 上 的 另 一 个 文档 相连 。 几 乎 可 以 在 所 有 的 网 页 中 找到 链接 。 


在 网 页 上 创建 E-Mail 链接 , 可 以 使 浏览 者 能 快速 反馈 自己 的 意见 。 当 浏览 者 单 击 E-Mail 
链接 时 ， 可 以 立即 打开 浏览 器 默认 的 E-Mail 处 理 程序 ， 收 件 人 的 邮件 地 址 由 E-Mail 超 链 





接 中 指定 的 地 址 自动 更 新 ， 无 须 浏览 者 输入 。 
基本 语法 : 


<a href="mailto: 邮 件 地 址 ">…</a> 
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语法 说 明 : 
在 该 语法 中 的 “mailto:” 后 面 输入 电子 邮件 的 地 址 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<tit1le> 设 置 电子 邮件 链接 </tit1le> 


</head> 

<body> 

<p><strong> 网 站 做 得 好 不 好 因素 很 多 ， 从 网 站 速度 、 内 容 价 值 、 广 告 价值 等 方面 考量 ， 
</strong></p> 


<p> 如 果 您 对 gquot ;网 站 建设 squot; 有 意见 或 建议 ,<a href="mailto: sdssh@163.com"> 
请 发 到 我 们 的 邮箱 </a></p> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 电子 邮件 链接 ， 在 浏览 器 中 预览 ， 单 击 设置 的 电子 邮件 链接 ， 
效果 如 图 6-10 所 示 。 


PE P| Xx 
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如 内 您 对 “网 站 建设 “有 重 见 或 建议 ， 语 发 到 我 们 的 孝 条 
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6-10 设置 E-mail 链接 


6.5.3 ”链接 到 FTP 


FTP 是 一 种 文件 传输 协议 ， 它 是 计算 机 与 计算 机 之 间 能 够 相互 通信 的 语言 ， 通 过 FTP 
可 以 获得 Internet 上 丰富 的 资源 。 
FTP 路 径 用 来 链接 FTP 服务 器 中 的 文档 ， 可 以 在 浏览 器 中 直接 输入 相应 的 FTP 地 址 ， 
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打开 相应 的 目录 或 下 载 相关 的 内 容 ， 也 可 以 使 用 相关 的 软件 ， 打 开 FTP 地 址 中 相应 的 目录 


或 者 下 载 相 关 的 内 容 。 
基本 语法 : 
<a href = "ftp:// 服 务 器 IP 地 址 或 域名 "> 链接 的 文字 </a> 
语法 说 明 : 


FTP 服务 器 链接 和 网 页 链接 的 区 别 在 于 所 用 协议 不 同 。FTP 需要 从 服务 器 管理 员 处 获 


得 登录 权限 。 不 过 部 分 FTP 服务 器 可 以 匿名 访问 ， 从 而 能 获得 一 些 公开 的 文件 。 


实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<a href="ftp://192.168.25.11" title=" 读 者 你 好 ， 欢 迎 进入 FTP 服务 器 。"> 连 接 FTP 
服务 器 </a><br /> 

</body> 

</html> 


加 粗 部 分 的 代码 是 FTP 服务 器 链接 ， 效 果 如 图 6-11 所 示 。 





6-11 ”FTP 服务 器 链接 


6.5.4 ”链接 到 Telnet 


利用 Telnet 可 以 与 服务 器 建立 HTTP 连接 ， 获 取 网 页 ， 实 现 浏览 器 的 功能 。 
当 需 要 对 http header 进行 观察 和 测试 的 时 候 ， 使 用 Telnet 非常 方便 。 因 为 浏览 器 看 不 








到 http header。 
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基本 语法 : 
<a href = "telnet:// 服 务 器 IP 地 址 或 域名 "> 链接 的 文字 </a> 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<a href="telnet://192.168.25.11" title=" 欢 迎 进入 Telnet 服务 器 。"> 连 接 Telnet 
服务 器 </a> 

</body> 

</html> 


加 粗 部 分 的 代码 是 Telnet 服务 器 链接 ， 效 果 如 图 6-12 所 示 。 


© filey//D/HTML+ DIV. 





图 6-12 Telnet 服务 器 链接 


6.5.5 下 载 文件 


如 果 希 望 制 作 下 载 文件 的 链接 ， 只 需 在 链接 地 址 处 输入 文件 所 在 的 位 置 即 可 。 当 用 户 
单 击 链接 后 ， 浏 览 器 会 自动 判断 文件 的 类 型 ， 并 做 出 针对 不 同情 况 的 处 理 。 

基本 语法 : 

<a href="url"> 链 接 内 容 </a> 

语法 说 明 : 

如 果 超 链接 指向 的 不 是 一 个 网 页 文件 ， 而 是 其 他 文件 ， 例 如 zip、mp3、exe 等 ， 单 
链接 的 时 候 就 会 下 载 文 件 。 

实例 代码 : 

<!doctype html> 

<html> 


<head> 
<meta charset="utf-8"> 
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<title> 文 件 下 载 </title> 
<body> 

<a href="06.zip"> 文 件 下 载 </a> 
</body> 

</html> 


这 里 使 用 <a hre 全 "06.zip "> 创建 了 一 个 下 载 文件 的 链接 , 在 浏览 器 中 浏览 效果 如 图 6-13 
所 示 ， 单 击 “ 文 件 下 载 ” 超 链接 ， 将 弹出 下 载 文件 界面 ， 如 图 6-14 所 示 。 
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图 6-13 下 载 文件 超 链接 图 6-14 下 载 文件 界面 


6.6 ”综合 实例 一 一 给 网 页 添加 链接 


通过 网 页 上 的 超 链 接 可 以 在 网 上 实现 方便 、 快 捷 的 访问 ， 它 是 网 页 上 不 可 缺少 的 重要 
元 素 ， 使 用 超 链接 可 以 将 众多 的 网 页 链接 在 一 起 ， 形 成 一 个 有 机 整体 。 本 章 主 要 讲述 了 各 
种 超 链接 的 创建 ， 下 面 就 用 所 学 的 知识 来 给 页 面 添加 各 种 超 链接 。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 6-15 所 示 。 
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6-15 ”网 页 文档 
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(2) 打开 代码 视图 ,在 <body> 和 </body> 之 间 相 应 的 位 置 输入 如 下 代码 , 设置 文字 链接 
如 图 6-16 所 示 。 


<1i><a href="About-1.shtml"> 企 业 简介 </a></1i> 
<1i><a href="About-2.shtml"> 销 售 网 络 </a></1i> 
<li><a href="About-3.shtml"> 联 系 我 们 </a></1i> 
<1i><a href="About-4.shtml"> 成 功 案 例 </a></1i> 
<1Li><a href="About-6.shtml"> 公 司 荣誉 </a></1i> 
<1i><a href="About-6.shtml"> 组 织 机构 </a></1i> 
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图 6-16 输入 文字 链接 
(3) 保存 网 页 ， 在 浏览 器 中 预览 效果 ， 如 图 6-17 所 示 。 


女 慎 月， 六 呈 日 ， 枉 理 M 收 大。 工具 各 (HI 
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图 6-17 预览 效果 
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本 章 小 结 


超 链接 是 网 页 的 重要 组 成 部 分 ， 通 过 网 页 所 提供 的 链接 功能 ， 用 户 可 以 链接 到 网 络 上 
的 其 他 网 页 。 如 果 网 页 上 没有 超 链 接 ,就 只 能 在 浏览 器 地 址 栏 中 一 遍 遍 地 输入 各 网 页 的 URL 
地 址 ， 这 将 是 一 件 很 麻烦 的 事 。 本 章 主要 讲述 了 超 链接 的 基本 概念 、 创 建 基本 超 链 接 、 创 
建 图 像 超 链接 、 创 建 锚 点 链接 的 知识 。 通 过 对 本 章 的 学 习 ， 读 者 应 对 网 页 中 超 链接 有 一 个 
初步 的 认识 。 





练 习 题 
1. 填空 题 
(1) 图 像 的 链接 和 文字 的 链接 方法 是 一 样 的 ， 都 是 用 <a> 标 签 来 完成 ， 只 要 将 <img> 标 
签 放 在 和 之 间 就 可 以 了 。 
(2) 建立 了 锚 点 以 后 ， 就 可 以 创建 到 锚 点 的 链接 ， 需 要 用 号 以 及 锚 点 的 名 
称 作为 属性 值 。 
2. 操作 题 





图 6-18 ”给 网 页 添加 超 链接 
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【学 习 目 标 】 


表格 是 网 页 制作 中 使 用 最 多 的 工具 之 一 ， 在 制作 网 页 时 ， 使 用 表格 可 以 更 清晰 地 排列 
数据 。 但 在 实际 制作 过 程 中 ， 表 格 更 多 地 用 在 网 页 布局 定位 上 。 很 多 网 页 都 是 以 表格 布局 
的 ， 这 是 因为 表格 在 文本 和 图 像 的 位 置 控制 方面 都 有 很 强 的 功能 。 灵活 、 熟 练 地 使 用 表格 ， 
在 网 页 制作 时 会 有 如 虎 添 翼 的 感觉 。 

本 章 主 要 内 容 包 括 : 

(1) 创建 并 设置 表格 属 签 ; 

(2) 表格 的 结构 标签; 

(3) 使 用 表格 排版 网 页 。 


7.1 创建 并 设置 表格 属性 


表格 由 行 、 列 和 单元 格 三 部 分 组 成 。 使 用 表格 可 以 排列 页 面 中 的 文本 、 图 像 以 及 各 种 
对 象 。 行 贯穿 表格 的 左右 ， 列 则 是 上 下 贯穿 ， 单 元 格 是 行 和 列 交会 的 部 分 ， 它 是 输入 信息 
的 地 方 。 


7.1.1 表格 的 基本 标签 : <table><tr><td> 


表格 一 般 通 过 表格 标签 <table>、 行 标签 <t> 和 单元 格 标签 <td> 来 创建 。 表 格 的 各 种 属 
性 都 要 在 表格 的 开始 标签 <table> 和 表格 的 结束 标签 </table> 之 间 才 有 效 。 

基本 语法 : 

<table> 

<tr> 

<td> 单 元 格 内 的 文字 </td> 

<tq> 单 元 格 内 的 文字 </td> 

</tr> 

<tr> 

<tq> 单 元 格 内 的 文字 </td> 

<td> 单 元 格 内 的 文字 </td> 

EE 

</table> 


语法 说 明 : 
<table> 标 签 和 </table> 标 签 分 别 表示 表格 的 开始 和 结束 ， 而 <t> 和 </t> 则 分 别 表示 行 的 
开始 和 结束 ， 在 表格 中 包含 几 组 <t>…</tr> 就 表示 该 表格 为 几 行 ，<td> 和 </td> 表 示 单 元 格 
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的 起 始 和 结束 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 表 格 的 基本 标签 </title> 

</head> 

<body> 

<table> 

<tr> 

<td> 第 工行 第 工 列 单元 格 </td><td> 第 1 行 第 2 列 单元 格 </td> 
</tr> 

<tr> 

<td> 第 2 行 第 1 列 单元 格 </td><td> 第 2 行 第 2 列 单元 格 </td> 
</tr> 

</table> 

</body> 

</html> 


加 粗 部 分 的 代码 是 表格 的 基本 构成 ， 在 浏览 器 中 预览 可 以 看 到 在 网 页 中 添加 了 一 个 2 
行 2 列 的 表格 ， 表 格 没有 边框 ， 如 图 7-1 所 示 。 


a 口 X 
SR -< || GE shasta 
文件 (月 妨 蝇 (EF) 坦 看 (V) 履 荐 实 (A) 工具 (T) 帮助 (H) 
第 ! 行 第 1 列 单元 格 第 1 行 第 2 列 单元 格 
第 2 行 第 1 列 单元 格 第 2 行 第 2 列 单元 格 
县 100% 








图 7-1 表格 的 基本 构成 效果 


7.1.2 ”表格 宽度 和 高 度 : width 、height 
width 属性 用 来 设置 表格 的 宽度 ，height 属性 用 来 设置 表格 的 高 度 ， 以 像素 或 百分比 为 


位 。 
基本 语法 : 
<table width=" 表 格 宽度 "height=" 表 格 高 度 "> 





二 
tt 
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语法 说 明 : 
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表格 高 度 和 表格 宽度 值 可 以 是 像素 ， 也 可 以 为 百分比 ， 如 果 设 计 者 不 指定 ， 则 默认 宽 








适应 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 表 格 宽度 和 高 度 </title> 
</head> 

<body> 

<table width="500" height="300"> 
EZ: 














<td> 第 1 行 第 1 列 单元 格 </td><td> 第 1 行 第 2 列 单元 格 </td> 


本 
<tr> 


<tq> 第 2 行 第 1 列 单元 格 </td><td> 第 2 行 第 2 列 单元 格 </td> 


A 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 是 设置 表格 的 宽度 为 S00px， 高 度 设置 为 300px, 在 浏览 器 中 预览 可 以 


看 到 效果 ， 如 图 7-2 所 示 。 





© ESET Oo- oS sri 


文件 月。 六 吐 E) 查看 (V) 收藏 天 (A) 工具 (T) 帮助 (H) 


第 1 行 第 1 列 单元 格 第 1 行 第 2 列 单元 格 


第 2 行 第 1 列 单元 格 第 2 行 第 2 列 单元 格 








100% ~ 





7-2 ”表格 的 宽 和 高 


7.1.3 ”表格 的 标题 : <caption> 


<caption> 标 签 可 以 为 表格 提供 一 个 简短 的 说 明 ， 和 图 像 的 说 明 比 较 类 似 。 默 认 情 况 下 ， 


大 部 分 可 视 化 浏览 器 显示 表格 标题 在 表格 的 上 方 中 央 。 
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基本 语法 : 
<caption> 表 格 的 标题 </caption> 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 格 的 标题 </title> 
</head> 
<body> 
<table width="700" height="150"> 
<caption> 
小 学 一 年 级 课程 表 
</caption> 
<tr> 
<td width="98">&nbsp;</td> 
<td width="97"> 星 期 一 </td> 
<tq width="105"> 星 期 二 </td> 
<td width="95"> 星 期 三 </td> 
<td width="101"> 星 期 四 </td> 
<td width="77"> 星 期 五 </td> 
</tr> 
<tr> 
<td> 第 1 节 </td> 
<td> 语 文 </td> 
<td> 语 文 </td> 
<td> 英 语 </td> 
<td> 数 学 </td> 
<td> 语 文 </td> 
as 
Ex 
<td> 第 2 节 </td> 
<td> 数 学 </td> 
<td> 数 学 </td> 
<td> 语 文 </td> 
<td> 语 文 </td> 
<td> 数 学 </td> 
KWET> 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 表示 设置 表格 的 标题 为 “小 学 一 年 级 课程 表 ”， 在 浏览 器 中 预览 ， 可 
以 看 到 表格 的 标题 ， 如 图 7-3 所 示 。 
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Es 
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星期 一 星期 二 星期 三 星期 四 星 荐 五 
这] 节 语文 语文 英语 束 学 语文 
第 闻 数学 数学 语文 语文 数学 
到 100% ~ 








7-3 ”表格 的 标题 


[ 庆 提示 : 使 用 <caption> 标 签 创 建 表格 标题 的 好 处 是 标题 定义 包含 在 表格 内 。 如 果 表 格 
移动 或 在 HTML 文件 中 重 定 位 ， 标 题 会 随 着 表格 相应 地 移动 配置 ， 这 是 某 种 
类 型 设备 应 具备 的 特性 。 


7.1.4 表格 的 表 头 : <th> 


表 头 是 指 表格 的 第 一 行 或 第 一 列 等 对 表格 内 容 的 说 明 ， 文 字样 式 居中 、 加 粗 显示 ， 通 
过 <th> 标 签 实现 。 

基本 语法 ; 

<table > 


<tr> 
<th>.</th> 


<HEL> 
</table> 


语法 说 明 ; 
(1) <th>: 表 头 标签 ， 包 含 在 <tr> 标 签 中 。 

(2) 在 表格 中 ， 只 要 把 标签 <td> 改 为 <th> 就 可 以 实现 表格 的 表 头 。 
实例 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 表 格 的 表 头 </title> 

</head> 

<body> 

<table width="700" height="150"> 
<caption> 
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小 学 三 年 级 课程 表 
</caption> 
E> 
<td width="98">&nbsp;</td> 
<th> 星 期 一 </th> 
<th> 星 期 二 </th> 
<th> 星 期 三 </th> 
<th> 星 期 四 </th> 
<th> 星 期 五 </th> 
</tr> 
<tr> 
<td> 第 1 节 </td> 
<td> 语 文 </td> 
<td> 语 文 </td> 
<td> 英 语 </td> 
<td> 数 学 </td> 
<td> 语 文 </td> 
二 由 工 > 
<tr> 
<td> 第 2 节 </td> 
<td> 数 学 </td> 
<td> 数 学 </td> 
<td> 语 文 </td> 
<td> 语 文 </td> 
<td> 数 学 </td> 
ET 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 为 设置 表格 的 表 头 ， 在 浏览 器 中 预览 可 以 看 到 表格 的 表 头 效果 ， 如 
图 7-4 所 示 。 


人 EEE P - ¢ | B tm 
[280 SEE EEM WaxN IRM Wo 
小 学 三 年 级 课程 表 





第 2 节 数学 数学 语文 语文 都 学 





扫 100% ~ 





7-4 ”表格 的 表 头 效果 


除 108 





第 7 瘟 用 HTML 创建 表格 


7.1.5 表格 对 齐 方式 : align 
可 以 使 用 表格 的 align 属性 来 设置 表格 的 对 齐 方式 。 
基本 语法 : 
<table align=" 对 齐 方式 ”> 
语法 说 明 : 
align 属性 参数 值 见 表 7-1。 














表 7-1 align 参数 取 值 














属性 什 说 明 

left | 整个 表格 在 浏览 器 页 面 中 左 对 齐 
5 记过 | 整个 表格 在 浏览 器 页 面 中 居中 对 齐 
i 整个 表格 在 浏览 器 页 面 中 右 对 齐 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<title> 表 格 对 齐 方式 </title> 
</head> 
<body> 
<table width="700" height="150" align="center"> 
<caption> 
小 学 一 年 级 课程 表 
</caption> 
<tr> 
<td width="98">&nbsp;</td> 
<th width="87"> 星期 一 </th> 
<th width="137"> 星期 二 </th> 
<th width="88"> 星期 三 </th> 
<th width="80"> 星期 四 </th> 
<th width="84"> 星期 五 </th> 
< /AEE 
<tr> 
<td> 第 1 节 </td> 
<tq> 语文 </td> 
<td> 语文 </td> 
<td> 英语 </td> 
<td> 数学 </td> 
<td> 语文 </td> 
< 
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<tr> 
<td> 第 2 节 </td> 
<td> 数学 </td> 
<td> 数学 </td> 
<td> 语文 </td> 
<td> 语文 </td> 
<td> 数学 </td> 
RE 

</table> 

</body> 

</html> 


加 粗 部 分 的 代码 为 设置 表格 的 对 齐 方 式 ， 在 浏览 器 中 预览 可 以 看 到 表格 为 居中 对 齐 
如 图 7-5 所 示 。 





- o Xx 
| 
ET 
中 学 一 平生 9 址 来 
星 朋 呈 期 旦 期 三 于 期 四 旦 期 五 
第 文 语文 英语 到 学 区 
第 过 EE 二 学 语文 语文 下 
100% 





图 7-5 表格 的 居中 对 齐 效 果 
[名 提示 : 虽然 整个 表格 在 浏览 器 页 面 范围 内 居中 对 齐 ， 但 是 表格 里 单元 格 的 对 齐 方式 


并 不 会 因此 而 改变 。 如 果 要 改变 单元 格 的 对 齐 方式 ， 就 需要 在 行 、 列 或 单元 
格 内 另外 定义 。 


7.1.6 ”表格 的 边框 宽度 : border 


可 以 通过 对 表格 添加 border 属性 ， 来 实现 为 表格 设置 边框 线 以 及 美化 表格 的 目的 。 默 
认 情 况 下 如 果 不 指定 border 属性 ， 表 格 的 边框 为 0， 则 浏览 器 将 不 显示 表格 边框 。 

基本 语法 : 

<table border=" 边 框 宽度 "> 

语法 说 明 : 

通过 border 属性 定义 边框 线 的 宽度 ， 单 位 为 像素 。 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 表 格 的 边框 宽度 </title> 
</head> 

<body> 

<table width="400" border="5"> 
<tr> 

<tq> 单 元 格 1</td> 

<tq> 单 元 格 2</td> 

</tr> 

<tr> 

<td> 单 元 格 3</td> 

<tq> 单 元 格 4</td> 

</tr> 

</table> 

</body> 

</html> 


第 7 瘟 用 HTML 创建 表格 


加 粗 部 分 的 代码 为 设置 表格 的 边框 宽度 ， 在 浏览 器 中 预览 ， 可 以 看 到 将 表格 边框 宽度 


设置 为 5px 的 效果 ， 如 图 7-6 所 示 。 





Bh to mm PREIE TP 
HD) HE) EN) WBN IRM SOM 
匣 元 格 1 区 元 格 2 
莉 元 格 3 区 元 格 4 














图 7-6 表格 的 边框 宽度 效果 


[名 提示 ; 


border 属性 设置 的 表格 边框 只 能 影响 表格 四 周 的 边框 宽度 ， 而 并 不 能 影响 单 


元 格 之 间 边 框 尺 寸 。 虽 然 设 置 边框 宽度 没有 限制 ， 但 是 一 般 边 框 设置 不 应 超 
过 5px， 过 于 宽大 的 边框 会 影响 表格 的 整体 美观 。 


7.1.7 表格 边框 颜色 : bordercolor 


默认 情况 下 边框 的 颜色 是 灰色 的 ， 可 以 使 用 bordercolor 设置 边框 颜色 。 但 是 设置 边框 
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! 颜色 的 前 提 是 边框 的 宽度 不 能 为 0， 否则 无 法 显示 出 边框 的 颜色 。 
! 基本 语法 ， 

| <table border=" 边 框 宽度 "bordercolor=" 边 框 颜色 "> 

1 语法 说 明 : 

| 定义 颜色 的 时 候 ， 可 以 使 用 英文 颜色 名 称 或 十 六 进 制 颜色 值 。 
1 实例 代码 : 
1 

1 

1 

1 

1 

1 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 表 格 边框 颜色 </title> 
</head> 

<body> 

<table width="400" border="4" bordercolor="#E90003"> 
<tr> 

<td> 单 元 格 1</td> 

<tq> 单 元 格 2</td> 

</tr> 

<EX> 

<tq> 单 元 格 3</td> 

<td> 单 元 格 4</td> 

<PEr 

</table> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 表格 边框 的 颜色 ， 在 浏览 器 中 预览 可 以 看 到 边框 颜色 的 效果 ， 
如 图 7-7 所 示 。 














- oOo x 
a ETEEEEY PO- ¢ Bea 
文 全 门 ， 交 各 日 。 吾 在 MI。 关 芝 夫人) 工具。 得 动 Hi 
恒 元 本 全 元 得 7 | 
[E 汉 3 
R100% ~ 








图 7-7 表格 边框 颜色 效果 


7.1.8 单元 格 间距 : cellspacing 
表格 的 单元 格 和 单元 格 之 间 ， 可 以 设置 一 定 的 距离 ， 这 样 可 以 使 表格 显得 不 会 过 于 
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紧凑 。 
基本 语法 : 


<table cellspacing=" 间 距 值 "> 


语法 说 明 : 
单元 格 的 间距 以 像素 为 单位 ， 默 认 值 是 2。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 单 元 格 间 距 </title> 
</head> 

<body> 

<table width="400" border="3" cellspacing="5" bordercolor="#618A04"> 
<tr> 

<td> 单 元 格 1</td> 
<tq> 单 元 格 2</td> 

</tr> 

E> 

<tq> 单 元 格 3</td> 
<td> 单 元 格 4</td> 

<AEr 

</table> 

</body> 

</html> 


加 粗 的 代码 部 分 的 代码 为 设置 单元 格 的 间距 ， 在 浏览 器 中 预览 ， 可 以 看 到 单元 格 的 间 
距 为 5px 的 效果 ， 如 图 7-8 所 示 。 
































bs# 口 x 
司 EI 只 - ©| G a 
文件 人 病 各 日 ” 坦 看 [Vi 履 意 夫 (A) ”工具 (T) 。 帮 勒 (H) 
蕴 元 格 ! 嫌 元 格 2 
格 3 单元 格 4 
所 100% 








7-8 ”单元 格 间距 效果 


7.1.9 单元 格 边 距 : cellpadding 
默认 情况 下 ， 单 元 格 里 的 内 容 会 紧 贴 着 表格 的 边框 ， 这 样 看 上 去 非常 拥挤 。 可 以 使 用 
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6 元 格 边框 与 单元 格 里 的 内 容 之 间 的 距离 。 





cellpadding 来 设置 











基本 语法 : 


<table cellpadding=" 文 字 与 边框 距离 值 "> 


语法 说 明 : 


单元 格 里 的 内 容 与 边框 的 距离 以 像素 为 单位 , 一 般 可 以 根据 需要 设置 , 但 是 不 





实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 表 格 内 文字 与 边框 距离 </title> 


</head> 
<body> 


<table width="400"border="l"cellspacing="5"cellpadding="8" 


bordercolor="#CCOOFF"> 
<tr> 


<td> 单 元 格 1</td><tq> 单 元 格 2</td> 


</tr> 
<tr> 


<tq> 单 元 格 3</td><td> 单 元 格 4</td> 


EP> 
</table> 
</body> 
</html> 


月 


已 


过 大 。 


加 粗 部 分 的 代码 为 设置 单元 格 边 距 , 在 浏览 器 中 预览 可 以 看 到 文字 与 边框 的 距离 效果 ， 
如 图 7-9 所 示 。 





是 下: ED -< 感 二 im 文字 SIEIE 训 


口 


x 


| 














文 伯 站。 驴 误 E) 本 看 (V】 收 写 天 (A】 工具 0) 才 20(H} 
单元 格 1 单元 格 2 
单元 格 3 单元 格 4 























7.1.10 ”表格 的 背景 色 : 
表格 的 背景 颜色 属性 bgcolor 是 针对 整个 表格 的 ，bgcolor 定义 的 颜色 可 以 被 行 、 列 或 
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7-9 ”单元 格 边 距 效果 


bgcolor 
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单元 格 定义 的 背景 颜色 所 覆盖 。 

基本 语法 : 

<table bgcolor=" 背 景 颜色 "> 

语法 说 明 : 

定义 颜色 的 时 候 ， 可 以 使 用 英文 颜色 名 称 或 十 六 进 制 颜色 值 。 
实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 格 的 背景 色 </title> 
</head> 
<body> 
<table width="400"border="l"cellspacing="8"cellpadding="10" 
bordercolor="#CCOO0FF"bgcolor="#FFFF00"> 
<tr> 
<tq> 单 元 格 1</td><td> 单 元 格 2</td> 
<WEr> 
<tr> 
<tq> 单 元 格 3</td><td> 单 元 格 4</td> 
</tr> 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 为 设置 表格 的 背景 颜色 ， 在 浏览 器 中 预览 可 以 看 到 表格 设置 了 黄色 的 
背景 ， 如 图 7-10 所 示 。 











© EEE 忆 - < | 全 天 to | 
立信 (久久 下) 到 看 MV) 必 训 (A】 工具 Tm 都 动 H) 











单元 格 1 单元 格 2 








单元 格 3 单元 格 4 























100% ~ 





7-10 设置 表格 背景 颜色 效果 


7.1.11 表格 的 背景 图 像 : background 
除了 可 以 为 表格 设置 背景 颜色 之 外 ， 还 可 以 为 表格 设置 更 加 美观 的 背景 图 像 。 
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基本 语法 : 


<table background=" 背 景 图 像 地 址 " > 

语法 说 明 : 

背景 图 像 的 地 址 可 以 为 相对 地 址 ， 也 可 以 为 绝对 地 址 。 
实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 格 的 背景 图 像 </title> 
</head> 
<body> 
<table width="500"border="1l" cellspacing="10" cellpadding="10" 
background="bg .jpg"> 
<tr> 
<td> 单 元 格 1</td><td> 单 元 格 2</td> 
</tr> 
<tr> 
<td> 单 元 格 3</td><td> 单 元 格 4</td> 
ET 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 为 设置 表格 的 背景 图 像 ， 在 浏览 器 中 预览 可 以 看 到 表格 设置 了 背景 图 
像 的 效果 ， 如 图 7-11 所 示 。 











5 
司 EEEERTTEIT - C | 名 表格 的 疹 最 图 从 x 
文件 (月 编 锅 (E) ”查看 (V) 收藏 夫 (A) 工具 (T 帮助 (H) 









































臣 100% > 





7-11 设置 表格 的 背景 图 像 效 果 
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7.2 ”表格 的 结构 标签 


为 了 在 源 代 码 中 清楚 地 区 分 表格 结构 ，HTML 语言 中 规定 了 <thead>、<tdoby> 和 
<tfoot> 3 个 标签 。 分 别 对 应 于 表格 的 表 头 、 表 主体 和 表 尾 。 


7.2.1 设计 表 头 样式 : <thead> 


表 头 样式 的 开始 标签 是 <thead>， 结 束 标签 是 </thead>。 它 们 用 于 定义 表格 最 上 端 表 头 
的 样式 ， 可 以 设置 背景 颜色 、 文 字 水 平 对 齐 方式 、 文 字 的 垂直 对 齐 方式 等 。 
基本 语法 : 


<thead> 








</thead> 

语法 说 明 : 

在 该 语法 中 , bgcolor、align、valign 的 取 值 范围 与 单元 格 中 的 设置 方法 相同 。 在 <thead> 
标签 内 还 可 以 包含 <tt>、<th> 和 <tr> 标 签 ， 而 一 个 表 元 素 中 只 能 有 一 个 <thead> 标 签 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 计 表 头 样式 </title> 
</head> 
<body> 
<table width="700" height="150" border="1"> 
<caption> 
宝宝 购物 清单 
</caption> 
<thead bgcolor="#4BA305"align="center"> 
<tr> 
<td width="98"> 名 称 </td> 
<td width="87"> 数 量 <br></td> 
<tq width="137"> 单 价 </td> 
<td width="80"> 总 价 </td> 
</Er> 
</thead> 
ER> 
<td> 包 巾 </td> <td>2</td> 
<td>20 元 </td> 
<td>40 元 </td> 
ET 
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< 七 > 
<td> 婴 儿 车 </td> 
<td>1</td> 
<td>199 元 </td> 
<td>199 元 </td> 







































































1 
1 
1 
1 
1 
1 
1 
1 
| < 人 /EPE> 
1 </table> 
| </body> 
1 </html> 
1 
| 加 粗 部 分 的 代码 为 设置 表格 的 表 头 ， 在 浏览 器 中 预览 效果 ， 如 图 7-12 所 示 。 
t ba 口 x 
1 上 国 DAHTML+DIV+Css 网 Ri ”| 铺设 计 表 村 式 
1 文件 (篇 得 (E) 喜 看 V) 收藏 夫 (A) 工具 (T) 。 帮 动 (H) 
宝宝 购物 清单 
和 中 p Po 元 40 元 
加 儿 车 1 199 元 199 元 
或 100% ~ 





图 7-12 设置 表格 的 表 头 效果 


7.2.2 ”设计 表 主体 样式 :<tbody> 


与 表 头 样式 的 标签 功能 类 似 ， 表 主体 标签 用 于 统一 设计 表 主 体 部 分 的 样式 ， 标 签 为 
<tbody>。 

基本 语法 : 

<tbody bgcolor=" 背 景 颜色 " align=" 对 齐 方式 "> 


</tbody> 

语法 说 明 : 

在 该 语法 中 ，bgcolor、align、valign 的 取 值 范围 与 <thead> 标 签 中 的 相同 。 一 个 表 元 素 
中 只 能 有 一 个 <tbody> 标 签 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


[a 118 








第 7 瘟 用 HTML 创建 表格 


<title> 设 计 表 主 体 样式 </title> 
</head> 
<body> 
<table width="700" height="150" border="1"> 
<caption> 
宝宝 购物 清单 
</caption> 
<thead bgcolor="#448C03"align="center"> 
<tr> 
<td width="98"> 名 称 </td> 
<td width="87"> ”数量 <br></td> 
<tqd width="137"> 单 价 </td> 
<td width="80"> 总 价 </td> 
<AEE> 
</thead> 
<tbody bgcolor="#8FEF2D" align="left"> 
<tr> 
<td> 包 巾 </td><td>2</td> 
<td>20 元 </td><td>40 元 </td> 
</tr> 
<tr> 
<td> 婴 儿 车 </td><td>1</td> 
<td>199 元 </td><td>199 元 </td> 




































































</tr> 
</tbody> 
</table> 
</body> 
</html> 
加 粗 部 分 的 代码 为 设置 表格 的 表 主 体 ， 在 浏览 器 中 预览 效果 ， 如 图 7-13 所 示 。 
学 口 x 
各 DAHTML+DIV+CSS 网 页 设 i DD ~ | 司 设计 表 主 体 桥 式 S 
文件 (F) ”编辑 EE) 查看 (V 收藏 交 (A)。 工具 (T 。 帮 动 (H) 
宝宝 购物 清单 
所 巾 Pp po 元 40 元 
加 儿 车 1 199 元 199 元 
胞 100%6 








7-13 设置 表格 的 表 主体 的 效果 
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7.2.3 设计 表 尾 样式 : <tfoot> 


<tfoot> 标 签 用 于 定义 表 尾 样式 。 
基本 语法 : 
< 七 foot bgcolor=" 背 景 颜 色 "align=" 对 齐 方式 "valign=" 垂 直 对 齐 方式 "> 





</tfoot> 


语法 说 明 : 


在 该 语法 中 ，bgcolor、align、valign 的 取 值 范围 与 <thead> 标 签 中 的 相同 。 一 个 表 元 素 





中 只 能 有 一 个 <tfoot> 标 签 。 
实例 代码 ; 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table width="700" height="150" border="1"> 
<caption> 化 工 报价 网 </caption> 
<thead bgcolor="#056F0D"align="center"> 
<tr> 
<td width="98"> 品 名 </td> 
<td width="87"> 型 号 <br /></td> 
<td width="137"> 规 格 </td> 
<td width="80"> 价格 </td> 
</tr> 
</thead> 
<tbody bgcolor="#14E32B" align="left"> 
<tr> 
<td> 甲 醇 </td> 
<td>99.8%</td> 
<tq>170kg/ 桶 </ta> 
<td> 2200 元 / 吨 </td> 
KEE> 
<tr> 
<tqd> 二 握 甲 烷 </td> 
<tq> 优 级 </td> 
<tq> 医 药 级 </td> 
<td> 7900 元 / 吨 </td> 
</tr> 
</tbody> 
<tfoot align="right" bgcolor="#97EEF9"> 
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[IMINO 用 HTML 创建 表 阁 
IELLLL LT RE 

<tr><tqd colspan="4" style="text-align: left"> 特 别提 示 : 本 信息 由 相关 企业 自行 提 

供 ， 真 实 性 未 证 实 ， 

仅 供 参考 。</tqd></tr> 

</tfoot> 

</table> 

</body> 

</html> 

加 粗 部 分 的 代码 为 设置 表 尾 样式 ， 在 浏览 器 中 预览 效果 ， 如 图 7-14 所 示 。 

S EES P - ¢| Sxssxs 多 


文件 月 。 油 训 日” 下 看 MY 要 二 夫 ( 工 上 站 才 反 (HD 
化 工 报价 网 


2 本 信息 由 相关 企业 自行 提供 ， 真 详 性 未 证 详 ， 仅 供 参 考 














7-14 ”设置 表 尾 样式 效果 


7.3 ”综合 实例 一 一 使 用 表格 排版 网 页 


表格 在 网 页 版 面 布局 中 发 挥 着 非常 重要 的 作用 , 网 页 中 的 所 有 元 素 都 需要 表格 来 定位 。 
本 章 主要 讲述 了 表格 的 常用 标签 ， 下 面 就 通过 实例 讲述 表格 在 整个 网 页 排版 布局 方面 的 综 
合 运用 。 

(1) 打开 Dreamweaver CC， 新 建 一 空白 文档 ， 如 图 7-15 所 示 。 


[Dy se sen se sh Sonn eR So vars wn se 五 画 
一 -一 








[Em MD 志 











7-15 新 建文 档 
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(2) 打开 “代码 ”视图 ， 将 光标 置 于 相应 的 位 置 ， 输 入 如 下 代码 ， 插 入 2 行 1 列 的 表 
格 。 此 表格 记 为 表格 1， 如 图 7-16 所 示 。 


<table width="1002" border="0" cellpadding="0" cellspacing="0"> 





Ee 
<td>gnbsp; </td> 
</Er> 
站 了 六 
<td>gnbsp; </td> 
/> 
</table> 
DW Hn ar SE SA BAM mol SO WAS CW Se w. OH 




















by [= -enowia- 





图 7-16 插入 表格 1 
(3) 在 表格 1 的 第 1 行 第 1 个 单元 格 位 置 输入 以 下 代码 , 插入 图 像 文件 , 如 图 7-17 所 示 。 
<img src="images/2.jpg" width="1003" height="245" alt=""/> 





es 
ra [3 

















By Ow 5- 





图 7-17 插入 图 像 
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(4) 将 光标 置 于 表格 1 的 第 2 行 单元 格 位 置 ， 输 入 以 下 代码 ， 设 置 单元 格 高 度 和 背景 
颜色 ， 如 图 7-18 所 示 。 


<td height="50" bgcolor="#018F60"></td> 











以 优 贰 的 杆 料 








be mn w mw 





图 7-18 设置 图 像 高 度 和 背景 


(5) 将 光标 置 于 表格 1 的 第 1 行 单 元 格 位 置 ， 输 入 以 下 代码 ， 插 入 1 行 6 列 的 表格 ， 
并 在 表格 中 输入 导航 文本 ， 如 图 7-19 所 示 。 


<table width="95%" border="0" align="center"> 
<tbody> 
<tr> 
<td style="font-size: 16px; color: #FFFFFF;"> 首 页 </td> 
<td style="font-size: 16px; color: #FFFFFF;"> 公 司 简 介 </td> 
<td style="font-size: 16px; color: #FFFFFF;"> 主 营 产 品 </td> 
<td style="font-size: 16px; color: #FFFFFF;"> 新 闻 中 心 </td> 
<td style="font-size: 16px; color: #FFFFFF;"> 人 力 资源 </td> 
<td style="font-size: 16px; color: #FFFFFF;"> 在 线 加 盟 </td> 
</tr> 
</tbody> 
</table> 
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(6) 将 光标 置 于 表格 1 的 右边 ， 输 入 代码 ， 插 入 1 行 2 列 的 表格 ， 此 表格 记 为 表格 2， 
如 图 7-20 所 示 。 


<table width="1002"” border="0" id="2"> 
<tbody> 
< 
<td>gnbsp;</td> 
<td>gnbsp;</td> 
</tr> 
</tbody> 
</table> 
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7-20 插入 表格 2 


(7) 将 光标 置 于 表格 2 的 第 1 行 单元 格 中 ， 输 入 代码 ， 插 入 2 行 1 列 的 表格 ， 此 表格 
记 为 表格 3， 在 第 1 行 单元 格 中 插入 图 像 ， 在 第 2 行 单元 格 中 输入 导航 文本 ， 如 图 7-21 所 示 。 


<table width="98%" border="0" cellpadding="5" cellspacing="5" id="3"> 
<tbody> 
<tr> 
<td bgcolor="#COFFE8"><img src="images/pic list.jpg"width="229" 
height="41" alt=""/></td> 
</tr> 
<ER> 
<td bgcolor="#COFFE8"><d1> 
<qdt> <strong> 酒 店 布 草 </strong></dt> 
<dd> 客 房 布 草 </dd> 
<dd> 高 档 台 布 </dd> 
<dd> 客 房 布 草 </dd> 
<dd> 酒 店 浴 袍 </dd> 
<dd> 开 苑 经 典 1 .5 床 酒店 布 草 &nbsp7z 床 品 </dd> 
<dt><strong> 酒 店 床上 用 品 </strong></dt> 
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<dd> 宾 馆 床 品 床 尾 巾 </dd> 
<dd> 宾 馆 被 章 </dd> 
<dd> 高 档 床上 用 品 </dd> 
<dd> 床 上 用 品 </dd> 
<dd> 酒 店 布 草 </dd> 
<aqt><strong> 桌 布 椅 套 </strong></dt> 
<dd> 台 布 口 布 </dd> 
<dq> 和 餐厅 椅 套 </dd> 
<dd> 圆 酒店 台布 </dd> 
<dd> 高 档 椅 套 </dd> 
<dd> 餐 厅 椅 套 </dd> 
<qdt><strong> 品 牌 家 纺 </strong></dt> 
<dd> 品 牌 家 纺 </dd> 
<dt><strong> 床 单 被 罩 </strong></dt> 
<dd> 床 单 、 被 罩 </dd> 
<dd> 床 单 anbsp; 被 罩 </dd> 
<qd> 供 应 床单 被 罩 </dd> 
<dt><strong> 客 房 用 品 </strong></dt> 
<dd> 客 房 用 品 电 水 壶 </dd> 
<dt><strong> 宾 馆 被 子 </strong></dt> 
<dd> 酒 店 床上 用 品 【 酒 店 被 子 】</dd> 
<dd> 宾 馆 床上 用 品 </dd> 
<qd> 宾 馆 被 子 </dd> 
</dl></td> 
</tr> 
</tbody> 
</table> 
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图 7-21 插入 表格 2 
(8) 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-22 所 示 。 
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人 以 优质 的 产品 ,优质 的 服务 丽 得 者 户 的 信 档 。 公 司 在 类 类 pp 
|， 业 务 快 下 发 展 ， 销 告 网 络 覆 得 全 国 各 地 、 
伏天 林 中 ， 水 质 甘 甜 穴 口 。 生 产 识 各 方面 为 先进 的 电脑 控制 全 自动 “ 


1 
1 
1 
1 
1 
1 
1 
1 
下 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
! 治 作 完全 执 生 GMP 标准 。 同 ej 实生 HACCP 丰 监察 拉 制 生产 环 

“a 





图 7-22 ”利用 表格 排版 网 页 效果 


本 章 小 结 


表格 是 用 于 排列 内 容 的 最 佳 方式 。 绝 大 多 数 网 页 的 页 面 都 是 使 用 表格 进行 排版 的 。 本 
章 主要 讲述 了 表格 的 创建 、 表 格 的 属性 、 行 属性 、 单 元 格 属性 和 表格 的 结构 标签 等 内 容 。 
通过 对 本 章 的 学 习 ， 要 学 会 合理 利用 表格 来 排列 数据 ， 有 助 于 协调 页 面 结构 的 均衡 ， 使 得 
页 面 在 形式 上 既 丰 富 多 彩 又 有 条 理 、 组 织 井 然 有 序 而 不 显得 单调 ， 从 而 设计 出 版 式 漂亮 的 
网 页 。 


1. 填空 题 


(1) 表格 由 行 、 列 和 单元 格 3 部 分 组 成 ， 一 般 通 过 3 个 标签 来 创建 ， 分 别 是 表格 标签 
、 行 标签 和 单元 格 标签 。 表 格 的 各 种 属性 都 要 在 表格 的 开 
始 标签 和 结束 标签 之 间 才 有 效 。 
| 标签 用 来 设置 表格 的 宽度 ， 标签 用 来 设置 表格 的 高 度 ， 以 
像素 或 百分比 为 单位 。 
(3) 为 了 在 源 代码 中 清楚 地 区 分 表格 结构 ，HTML 语言 中 规定 了 
和 三 个 标签 ， 分 别 对 应 于 表格 的 表 头 、 表 主体 和 表 尾 。 
(4) 表 头 样式 的 开始 标签 是 ， 结 束 标签 是 。 它 们 用 于 定义 表格 
最 上 端 表 头 的 样式 ， 可 以 设置 * 等 。 
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2. 操作 题 
利用 表格 排版 网 页 的 效果 如 图 7-23 所 示 。 























7-23 ”网 页 效果 图 
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【学 习 目 标 】 
在 制作 网 页 特别 是 动态 网 页 时 常常 会 用 到 表单 ， 表 单 主要 用 来 收集 客户 端 提供 的 相关 


信息 ， 使 网 页 具有 交互 功能 。 


本 章 主 要 内 容 包 括 : 

(1) 表单 元 素 form; 

(2) 表单 控件 <input>; 

(3) 选择 列表 条 目 元 素 <option>; 
(4) 选择 列表 元 素 <select>; 

(5) 文本 区 域 元 素 <textarea>。 


8.1 插入 表单 : <form> 


在 网 页 中 <form></form> 标 签 对 用 来 创建 一 个 表单 ， 即 定义 表单 的 开始 和 结束 位 置 ， 在 


标签 对 之 间 的 一 切 都 属于 表单 的 内 容 。 在 <form> 标 签 中 ， 可 以 设置 表单 的 基本 属性 ， 包 括 
表单 的 名 称 、 处 理 程序 和 传送 方法 等 。 一 般 情况 下 ， 表 单 的 处 理 程序 action 和 传送 方法 
method 是 必 不 可 少 的 参数 。 


8.1.1 处 理 动 作 : action 


址 。 


action 用 于 指定 表单 数据 提交 到 哪个 地 址 进行 处 理 。 
基本 语法 : 
<form action=" 表 单 的 处 理 程序 "> 


</form> 

语法 说 明 : 

表单 的 处 理 程 序 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 将 要 传递 的 程序 地 
这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 以 是 一 些 其 他 形式 的 地 址 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 





<meta charset="utf-8"> 


第 8 章 ”用 表 里 创 建交 互 式 网 页 


<title> 程 序 提交 </title> 

</head> 

<body> 

欢迎 您 预订 本 店 的 房间 ， 您 填写 的 预订 表 将 被 发 送 到 酒店 客房 预订 处 ， 我 们 会 在 最 短 的 时 间 内 给 您 
回复 。 

<form action="mailto:jiudian@ .com"> 

</form> 

</body> 

</html> 


加 粗 部 分 的 代码 是 程序 提交 到 的 地 址 ， 这 里 将 表单 提交 到 电子 邮件 。 


8.1.2 ”表单 名 称 : name 


name 用 于 给 表单 命名 ,这 一 属性 不 是 表单 的 必要 属性 , 但 是 为 了 防止 表单 提交 到 后 
处 理 程序 时 出 现 混乱 ， 一 般 需要 给 表单 命名 。 

基本 语法 : 

<form name=" 表 单 名 称 "> 








</form> 

语法 说 明 : 

表单 名 称 中 不 能 包含 特殊 字符 和 空格 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 表 单 名 称 </title> 

</head> 

<body> 

欢迎 您 预订 本 店 的 房间 ， 您 填写 的 预订 表 将 被 发 送 到 酒店 客房 预订 处 ， 我 们 会 在 最 短 的 时 间 内 给 您 
回复 。 

<form action="mailto:jiudian@.com" name="form1"> 
</form> 

</body> 

</html> 


加 粗 部 分 的 代码 是 表单 名 称 。 
8.1.3 ”传送 方法 : method 


表单 的 method 属性 用 于 指定 在 数据 提交 到 服务 器 的 时 候 使 用 哪 种 HTTP 提交 方法 , 可 
取 值 为 get 或 post。 
1 多 
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基本 语法 : 


<form method=" 传 送 方法 "> 


</form> 


语法 说 明 : 

传送 方法 的 值 只 有 两 种 ， 即 get 和 post。 

get: 表单 数据 被 传送 到 action 属性 指定 的 URL， 然 后 这 个 新 URL 被 送 到 处 理 程序 上 。 
post: 表单 数据 被 包含 在 表单 主体 中 ， 然 后 被 送 到 处 理 程序 上 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 传 送 方法 </title> 

</head> 

<body> 

欢迎 您 预订 本 店 的 房间 ， 您 填写 的 预订 表 将 被 发 送 到 酒店 客房 预订 处 ， 我 们 会 在 最 短 的 时 间 内 给 您 
回复 。 

<form action="mailto:jiudian@.com" method="post" name="form1l"> 
</form> 

</body> 

</html> 


加 粗 部 分 的 代码 是 传送 方法 。 
8.1.4 编码 方式 : enctype 


表单 中 的 enctype 属性 用 于 设置 表单 信息 提交 的 编码 方式 。 
基本 语法 : 


<form enctype=" 编 码 方式 "> 








</form> 

语法 说 明 : 

enctype 属性 为 表单 定义 了 MIME 编码 方式 ， 编 码 方式 的 取 值 见 表 8-1。 
表 8-1 enctype 属性 





enctype 的 取 值 


application/x-www-form-urlencoded 默认 的 编码 形式 
multipart/form-data MIME 编码 ， 上 传 文件 的 表单 必须 选择 该 项 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 编 码 方式 </title> 

</head> 

<body> 

欢迎 您 预订 本 店 的 房间 ， 您 填写 的 预订 表 将 被 发 送 到 酒店 客房 预订 处 ， 我 们 会 在 最 短 的 时 间 内 给 您 
回复 。 

<form action="mailto:jiudian@.com" method="post" 
enctype="application/x-www-form-urlencoded" name="form1"> 
</form> 

</body> 

</html> 


加 粗 的 代码 是 编码 方式 。 


运 提示 : ”enctype 属性 默认 的 取 值 是 application/x-www-form-urlencoded, 这 是 所 有 网 页 
的 表单 所 使 用 的 可 接受 的 类 型 。 


8.1.5 目标 显示 方式 : target 


target 用 来 指定 目标 窗口 的 打开 方式 ， 表 单 的 目标 窗口 往往 用 来 显示 表单 的 返回 信息 。 
基本 语法 : 
<form target=" 目 标 窗口 的 打开 方式 "> 


</form> 

语法 说 明 : 

目标 窗口 的 打开 方式 有 4 个 选项 : _blank、_parent、_self 和 _top。 其 中 _blank 为 将 链 
接 的 文件 载 入 一 个 未 命名 的 新 窗口 中 ; _parent 为 将 链接 的 文件 载 入 含有 该 链接 框架 的 父 杠 
架 集 或 父 窗 口中 ;_self 为 将 链接 的 文件 载 入 该 链接 所 在 的 同一 框架 或 窗口 中 ，_top 为 在 整 
个 浏览 器 窗口 中 载 入 所 链接 的 文件 ， 因 而 会 删除 所 有 框架 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 





<meta charset="utf-8"> 
<title> 目 标 显示 方式 </title> 
</head> 

<body> 
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欢迎 您 预订 本 店 的 房间 ， 您 填写 的 预订 表 将 被 发 送 到 酒店 客房 预订 处 ， 我 们 会 在 最 短 的 时 间 内 给 您 
回复 。 

<form action="mailto:jiudian@.com" method="post" 
enctype="application/x-www-form-urlencoded" name="forml" target=" blank"> 
</form> 

</body> 

</html> 


加 粗 部 分 的 代码 是 目标 显示 方式 。 
8.2 ”表单 控件 : <input> 


在 网 页 中 可 以 插入 的 表单 对 象 包括 文本 字段 、 复 选 框 、 单 选 按钮 、 提 交 按 钮 、 重 置 按 
钮 和 图 像 域 等 。 在 HTML 表单 中 ,input 标签 是 最 常用 的 表单 标签 ,常见 的 文本 字段 和 按钮 
都 采用 这 个 标签 。 

基本 语法 : 

<form> 

<input type=" 表 单 对 象 ” name=" 表 单 对 象 的 名 称 "> 

</form> 

在 该 语法 中 ,name 属性 是 为 了 便于 程序 对 不 同 表单 对 象 进行 区 分 ，type 属性 则 是 确定 
了 这 一 个 表单 对 象 的 类 型 。type 所 包含 的 属性 值 见 表 8-2。 


表 8-2 type 所 包含 的 属性 值 























属 性 描 述 
text 文本 字段 
password, 密码 域 
radio 单 选 按钮 
checkbox 复 选 框 
button 普通 按钮 
submit 提交 按钮 
reset 重 置 按钮 
image 图 像 域 
hidden 隐藏 域 
file 文件 域 


8.2.1 文本 字段 : text 


当 type 设置 为 text 时 ,表示 单行 文本 框 ,在 其 中 可 输入 任何 类 型 的 文本 、 数字 或 字母， 
输入 的 内 容 以 单行 显示 。 
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基本 语法 : 

<input name=" 文 本 字段 的 名 称 " type="text" value=" 文 字 字段 的 默认 取 值 ” size=" 文 本 
字段 的 长 度 " maxlength=" 最 多 字符 数 "/> 

语法 说 明 : 

在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 见 表 8-3。 


表 8-3 文本 字段 text 的 参数 值 






文本 字段 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 。 名 称 由 字母 、 数 字 以 及 下 划 线 
组 成 ， 区 分 大 小 写 

指定 插入 哪 种 表单 对 象 ， 如 type 三 "text"， 即 插入 文本 字段 
设置 文本 框 的 默认 值 
确定 文本 字段 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 
设置 文本 字段 中 最 多 可 以 输入 的 字符 数 








name 



















实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 文 本 字段 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 

<tr> 

<td> 
<form action="mailto:weixiao@foxw.com" name="forml" method="post" 
enctype="application/x-www-form-urlencoded"target=" blank" > 

用 户 名 : <input name="textfield" type="text" size="20" maxlength="15" /> 

</form> 
</td> 

ED 
</table> 
</body> 
</html> 


加 粗 的 代码 <input name="textfield" type="text" size="20" maxlength="15"> 表 示 将 文本 
框 的 名 称 设 置 为 textfield， 长 度 设置 为 20， 最 多 字符 数 设 置 为 13， 在 浏览 器 中 浏览 效果 如 
图 8-1 所 示 。 
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图 8-1 设置 文字 字段 


8.2.2 密码 域 : password 
在 表单 中 还 有 一 种 文本 字段 的 形式 一 一 密码 域 ， 输 入 到 其 中 的 文字 均 以 星 号 “*” 或 圆 


Eee» i 
点 “。” 显 示 。 


基本 语法 : 
<input name=" 密 码 域 的 名 称 " type="password" value=" 密 码 域 的 默认 取 值 ” size=" 密 码 
域 的 长 度 " maxlength=" 最 多 字符 数 "/> 


语法 说 明 ， 
在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 不 同 ， 见 表 8-4。 
表 8-4 ”密码 域 的 参数 值 





密码 域 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 。 名 称 由 字母 、 数 字 以 及 下 划 线 组 











二 成 ， 区 分 大 小 写 
pe | 指定 插入 哪 种 表单 对 象 
value 用 来 定义 密码 域 的 默认 值 ， 以 “*” 或 “。” 显 示 











Size 确定 密码 域 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 
maxlength 设置 密码 域 中 最 多 可 以 输入 的 字符 数 

实例 代码 : 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
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<title> 密 码 域 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 

<tr> 

<td> 

<form action="mailto:weixiao@foxw.com" name="forml" method="post" 
enctype="application/x-www-form-urlencoded"target=" blank" > 

<p> 用 户 名 : <input name="textfield" type="text" size="25" maxlength="20" /> 
</p> 

<p> 密 码 : 
<input name="textfield2" type="password" value="abcdef" size="25" 
maxlength="8" /> 

</p> 
</form> 

</td> 

</Er> 
</table> 
</body> 
</html> 


加 粗 的 代码 <input name="password" type="password" size="25" maxlength="6"> 表 示 将 
密码 域 的 名 称 设置 为 textfield2， 长 度 设 置 为 23， 最 多 字符 数 设 置 为 8， 在 浏览 器 中 浏览 效 
果 如 图 8-2 所 示 。 当 在 密码 域 中 输入 内 容 时 将 以 “。” 显 示 。 





bd 口 x 
I Do - < | GS ems 
文件 (和 编 句 (E) ”下 看 (V) ”收藏 夫 (A) 工具 (T) 帮助 (H) 
用 户 名 ， 
密码 [eveoee 
我 100% ~ 











8-2 设置 密码 域 


8.2.3 单 选 按钮 : radio 


单 选 按钮 用 来 让 浏览 者 进行 单一 选择 ， 在 页 面 中 以 圆 框 显 示 。 这 在 你 的 应 用 程序 中 用 
于 要 从 几 个 选项 中 选 一 个 的 地 方 。 

基本 语法 : 

<input name=" 单 选 按钮 的 名 称 "” type="radio" value=" 单 选 按钮 的 取 值 ” checked/> 
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语法 说 明 : 

在 该 语法 中 ，value 用 于 设置 用 户 选 中 单 选 按钮 后 ， 传 送 到 处 理 程序 中 的 值 。checked 
表示 这 一 单 选 按钮 被 选中 ， 而 在 一 个 单 选 按钮 组 中 只 有 一 个 单 选 按钮 可 以 设置 为 checked。 

实例 代码 : 











1 
1 
1 
1 
1 
1 
1 
' 
. <!doctype html> 
| <html> 
1 <head> 
<meta ‘charset="utf-8"> 
1 <title> 单 选 按钮 </title> 
</head> 
| <body> 
1 <table width="100%" cellspacing="0" cellpadding="0"> 

<tr> 

<td><form action="mailto:weixiao@foxw.com" name="forml" method="post" 
enctype="application/x-www-form-urlencoded"target=" blank" > 
性 别 了 

<input name="radiobutton" type="radio" value="radiobutton" checked /> 男 
<input type="radio" name="radiobutton" value="radiobutton" /> 女 
</form></td> 

</tr> 
</table> 
</body> 
</html> 


加 粗 的 代码 <input name="radio" type="radio" value="radiobutton" checked> 表 示 将 单 选 
按钮 的 名 称 设置 为 radiobutton， 取 值 设置 为 “ 男 ”并 设置 为 已 勾 选 。<input type="radio" 
name"radiobutton" value="radiobutton" > 表示 将 单 选 按钮 的 名 称 设置 为 radiobutton， 取 值 设 
置 为 “ 女 ”， 在 浏览 器 中 浏览 效果 如 图 8-3 所 示 。 





- _ 0 x 
© ES 局 -< & sis x 
立 伯 (| 交 党 有 ， 豆 看 VI 收 殴 宇 ( 工具 mT 都 动 (H 
性 别 。 @ 男 D 女 
及 100% ~ 








8-3 ”设置 单 选 按钮 


8.2.4 复 选 框 : checkbox 
浏览 者 在 填写 表单 时 ， 有 一 些 内 容 可 以 通过 做 出 选择 的 形式 来 实现 。 例 如 常见 的 网 上 
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调查 ， 首 先 提出 调查 的 问题 ， 然 后 让 浏览 者 在 若干 个 选项 中 做 出 选择 。 与 单 选 按钮 不 同 的 
是 ， 复 选 框 能 够 实现 项 目的 多 项 选择 ， 以 一 个 方 框 表示 。 

基本 语法 : 

<input name=" 复 选 框 的 名 称 " type="checkbox" value=" 复 选 框 的 取 值 " checked/> 


语法 说 明 : 

在 该 语法 中 ,checked 表示 复 选 框 在 默认 情况 下 已 经 被 选中 , 一 组 选项 中 可 以 同时 有 多 
个 复 选 框 被 选中 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 复 选 框 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
<ta> 
<form action="mailto:weixiao@foxw.com" name="forml" method="post" 
enctype="application/x-www-form-urlencoded"target=" blank" > 
爱好 : 
<input type="checkbox" name="checkbox" /> 唱歌 
<input type="checkbox" name="checkbox2" /> 跳舞 
<input name="checkbox3" type="checkbox" checked /> 音乐 
<input type="checkbox" name="checkbox4" /> 绘画 











</form> 
</td> 
EE 
</table> 
</body> 
</html> 
加 粗 的 代码 表示 复 选 框 , 其 中 音乐 为 默认 的 勾 选 项 , 在 浏览 器 中 浏览 效果 如 图 8-4 所 示 。 
三 上， 全 
rr] P -< @ se 
文件 F) 编 泗 E) 坦 看 (V) 要 这 夫 (A) 工兵 T) 蓝 区 (HI 
爱好 ， 口 唱歌 口 跳舞 回 音乐 口 绘画 
于 100% > 








8-4 设置 复 选 框 
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8.2.5 ”普通 按钮 : button 








表单 中 的 按钮 起 着 至 关 重 要 的 作用 ， 它 可 以 激发 提交 表单 的 动作 ， 也 可 以 在 用 户 需要 
修改 表单 的 时 候 ， 将 表单 恢复 到 初始 的 状态 ， 还 可 以 依照 程序 的 需要 ， 发 挥 其 他 的 作用 。 














普通 按钮 主要 是 配合 JavaScript 脚本 来 进行 表单 处 理 的 。 
基本 语法 : 





<input type="submit"”name=" 按 钮 的 名 称 ”value=" 按 钮 的 取 值 "onclick=" 处 理 程序 "/> 


语法 说 明 : 


在 该 语法 中 ，value 的 取 值 就 是 显示 在 按钮 上 的 文字 ， 可 以 添加 onclick 等 事件 来 实现 


一 些 特殊 的 功能 。onclick 事件 是 设置 当 鼠 标 按 下 按钮 时 所 进行 的 处 理 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 普 通 按 钮 </title> 

</head> 

<body> 

<table width="100%" cellspacing="0" cellpadding="0"> 
<ET> 
<td> 


<form action="mailto:weixiao@foxw.com" name="forml" method="post" 


enctype="application/x-www-form-urlencoded"target=" blank" > 
单 击 按钮 关闭 窗口 。 
<Dr /> 


<input type="submit" name="submit" value=" 关闭 窗口 "onclick="window.close()" 


这 
</form> 
</td> 
<AEE> 
</table> 
</body> 
</html> 








加 粗 的 代码 <input type="submit” name="button"” value=" 关 闭 窗 





"onclick: 


window.close0"> 表 示 将 按钮 的 显示 文字 设置 为 “关闭 窗口 ”， 处 理 程序 设置 为 


window.close()， 在 浏览 器 中 浏览 效果 如 图 8-5 所 示 。 当 单 击 “ 关 闭 窗口 ”按钮 
个 关闭 窗口 提示 框 。 
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Windows Intemet Explorer 


你 二 二条 网 页 正在 二 双关 交 入 项 卡 . 


是 否 关 闭 此 运 项 卡 ? 














肥 1006 ~ 


图 8-5 设置 普通 按钮 


8.2.6 ”提交 按钮 : submit 


提交 按钮 是 一 种 特殊 的 按钮 ， 单 击 该 类 按钮 可 以 实现 表单 内 容 的 提交 。 
基本 语法 : 

<input type="submit" name=" 按 钮 的 名 称 ” value=" 按 钮 的 取 值 ” /> 
语法 说 明 : 

在 该 语法 中 ，value 同样 用 来 设置 显示 在 按钮 上 的 文字 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 提 交 按 钮 </title> 

</head> 

<body> 

<table width="100%" cellspacing="0" cellpadding=" 
<tr> 





"> 


<td><form action="mailto:weixiaofoxw.com" name="forml" method="post" 






enctype="application/x-www-form-urlencoded"target=" blank" > 
<p> 用 户 名 : 
<input name="textfield" type="text" size="20" maxlength="15" /> 
</p> 
<p> 密 码 : 


<input name="textfield2" type="password" value="abcdef" size="25" 
maxlength="6" /> 
</p> 
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<p> 性 别 了 
<input name="radiobutton" type="radio" value="radiobutton" 
checked="checked" /> 
男 
<input type="radio" name="radiobutton" value="radiobutton" /> 
女 </p> 

<p> 

<input type="submit" name="button" value=" 提 交 "> 
</p> 
</form> 
</td> 
</Er> 

</table> 
</body> 
</html> 


加 粗 的 代码 <input type="submit”name="button"”value=" 提 交 '> 表 示 将 按钮 的 名 称 设置 
为 button， 取 值 设置 为 “提交 ”， 在 浏览 器 中 浏览 效果 如 图 8-6 所 示 。 




















E> 口 x 
EE 局 - ¢ aww 
文件 (篇 句 (E) 下 看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 
用 户 名 ， 
密码 ，[oeooes 
性 别 ，@ 男 O 女 
[9 
我 100% 








8-6 设置 提交 按钮 


8.2.7 重 置 按钮 : reset 


重 置 按钮 可 以 清除 用 户 在 页 面 中 输入 的 信息 ， 将 其 恢复 成 默认 的 表单 内 容 。 
基本 语法 : 

<input type="reset" name=" 按 钮 的 名 称 ” value=" 按 钮 的 取 值 ” /> 
语法 说 明 : 

在 该 语法 中 ，value 同样 用 来 设置 显示 在 按钮 上 的 文字 。 

实例 代码 : 


<!doctype html> 
<html> 
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<head> 
<meta charset="utf-8"> 
<title> 重 置 按钮 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
<td><form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="application/x-www-form-urlencoded"target=" blank" > 
<p> 用 户 名 : 
<input name="textfield" type="text" size="20" maxlength="15" /> 
</p> 
<p> 密 码 : 
<input name="textfield2" type="password" value="abcdef" size="25" 
maxlength="6" /> 
</p> 
<p> 性 别 : 
<input name="radiobutton" type="radio" value="radiobutton" 
checked="checked" /> 男 
<input type="radio" name="radiobutton" value="radiobutton" /> 女 </p> 
<p> 
<input type="submit" name="button" value=" 提 交 "> 
<input type="reset" name="button2" value=" 重 置 "> 
</p> 
</form></td> 
WEY 
</table> 
</body> 
</html> 


加 粗 的 代码 <input type="reset" name="button2" value=" 重 置 "> 表示 将 按钮 的 类 型 设置 为 
reset， 显 示 文 字 设置 为 “ 重 置 ”， 在 浏览 器 中 浏览 效果 如 图 8-7 所 示 。 

















- 0O x 
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Ns 
用 户 名 ， 
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怕 100% ~ 





8-7 ”设置 重 置 按钮 
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8.2.8 图 像 域 : image 


图 像 域 是 指 用 在 提交 按钮 位 置 的 图 像 ， 使 得 这 幅 图 像 具 有 按钮 的 功能 。 一 般 来 说 ， 使 
用 默认 的 按钮 形式 往往 会 让 人 觉得 单调 ， 若 网 页 使 用 了 较为 丰富 的 色彩 ， 或 者 稍微 复杂 的 
设计 ， 再 使 用 表单 默认 的 按钮 形式 可 能 会 破坏 整体 的 美感 。 这 时 ， 可 以 使 用 图 像 域 ， 创 建 
和 网 页 整体 效果 一 致 的 图 像 提交 按钮 。 

基本 语法 : 

<input name=" 图 像 域 的 名 称 "”type="image"” src=" 图 像 域 的 地 址 ” /> 

语法 说 明 : 

在 语法 中 ， 图 像 的 路 径 可 以 是 绝对 路 径 也 可 以 是 相对 路 径 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 图 像 域 </title> 

</head> 

<body> 

<table width="100%" cellspacing="0" cellpadding="0"> 


<tr> 
<td><form action="mailto:weixiaofoxw.com" name="forml" method="post" 











enctype="application/x-www-form-urlencoded"target=" blank" > 
<p> 会 员 登录 </p> 
<p> 账 号 : 
<input name="textfield" type="text" size="25" maxlength="15" /> 
</p> 
<p> 密 码 : <input name="textfield2" type="password" value="abcdef" 
size="25" maxlength="6" /> 
</p> 
<p> 
<input type="image" name="imageField" id="imageField" src="1.jpg" /> 
</p> 
</form> 
</td> 
EEC 
</table> 
</body> 
</html> 


加 粗 的 代码 <input type=image name="imageField" src="1.jpg" > 表示 将 图 像 域 的 名 称 设 
置 为 imageField， 地 址 设置 为 1 jpg， 在 浏览 器 中 浏览 效果 如 图 8-8 所 示 。 
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司 EGG -<]| SG em 
文件 [日 ” 竺 写 (E) ”查看 (V】 收 若 夫 (A) 工具 (D ”帮助 (H) 





会 员 登 录 
账号 ， 
密码 ，[eeseee 





想 100% ~ 





图 8-8 设置 图 像 域 


8.2.9 隐藏 域 : hidden 


隐藏 域 在 页 面 中 对 于 用 户 来 说 是 看 不 见 的 。 在 表单 中 插入 隐藏 域 的 目的 在 于 收集 和 发 
送信 息 ， 以 便于 被 处 理 表单 的 程序 所 使 用 。 发 送 表 单 时 ， 隐 藏 域 的 信息 也 被 一 起 发 送 到 服 
务 器 。 

基本 语法 : 

<input name=" 隐 藏 域 的 名 称 " type="hidden" value=" 隐 藏 域 的 取 值 ” /> 

语法 说 明 : 

通过 将 type 属性 设置 为 hidden， 可 以 根据 需要 在 表单 中 使 用 任意 多 的 隐藏 域 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 隐 藏 域 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
<td><form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="application/x-www-form-urlencoded"target=" blank" > 
<p> 会 员 登录 </p> 
<p> 账 号 : <input name="textfield" type="text" size="25" maxlength="15" /> </p> 
<p> 密 码 : <input name="textfield2" type="password" value="abcdef" size="25" 
maxlength="6" /> 
<input type="hidden" name="hiddenField" value="1"/> 
</p> 
<p> 


<input type="image" name="imageField" id="imageField" src="1.jpg" /> 


</p> 
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</form> 
</td> 
SEE 
</table> 
</body> 
</html> 


加 粗 的 代码 <input name=type="hidden" "hiddenField" value="1"> 表 示 将 隐藏 域 的 名 称 设 


置 为 hiddenField， 取 值 设置 为 1， 在 浏览 器 中 浏览 效果 如 图 8-9 所 示 ， 即 隐藏 域 的 内 容 不 
可 见 。 
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会 员 登 录 
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所 100% 


8-9 设置 隐藏 域 


8.2.10 文件 域 : fi 


文件 域 是 由 一 个 文本 框 和 一 个 “浏览 ”按钮 组 成 的 ， 用 户 可 以 直接 将 要 上 传 给 网 站 的 
文件 的 路 径 输 入 在 文本 框 中 ， 也 可 以 单 击 “ 浏 览 ” 按 钮 进行 选择 。 

基本 语法 : 

<input name=" 文 件 域 的 名 称 ”type="file" size=" 文 件 域 的 长 度 " maxlength=" 最 多 字符 

rn 

语法 说 明 : 

只 要 将 <input> 标 签 中 type 属性 值 设 为 file 就 可 以 插入 文件 选择 输入 框 , enctype 属性 确 
保 文件 采用 正确 的 格式 上 传 ， 对 于 允许 文件 上 传 的 表单 ， 不 能 使 用 get 方法 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 件 域 </title> 

</head> 

<body> 

<table width="100%" cellspacing="0" cellpadding="0"> 


e 
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<tr> 
<td> 
<form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="multipart/form-data"target=" blank" > 
<p> 请 选择 文件 
<input name="fileField" type="file" id="fileField" size="30" 
maxlength="40" /> 
</p> 
</form> 
</td> 
NAEE> 
</table> 
</body> 
</html> 


加 粗 的 代码 <input name="fileField" type="file" size="30" maxlength="40"> 表 示 将 文件 域 
的 名 称 设置 为 fleField， 长 度 设 置 为 30， 最 多 字符 数 设置 为 40， 在 浏览 器 中 浏览 效果 如 
图 8-10 所 示 。 








- oO x 
SD OE Oo - ¢ | Gxte 
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请 选择 文件 浏览 
夭 100% > 








图 8-10 设置 文件 域 


8.3 选择 列表 条 目标 签 : <option> 


一 个 列表 可 以 包括 一 个 或 多 个 项 目 。 当 需要 显示 许多 项 目 时 ， 菜 单 就 非常 有 用 。 表 单 
中 有 两 种 类 型 的 菜单 : 一 种 是 单 击 时 出 现下 拉 的 菜单 ， 称 为 下 拉 菜 单 ， 另 一 种 菜单 则 是 显 
示 为 一 个 列 有 项 目的 可 滚动 列表 ， 可 从 该 列表 中 选择 项 目 ， 称 为 滚动 列表 。 菜 单 和 列表 主 
要 是 为 了 节省 页 面 的 空间 ， 它 们 都 是 通过 <select> 和 <option> 标 签 来 实现 的 。 

下 拉 菜 单 是 一 种 最 节省 页 面 空间 的 选择 方式 ， 因 为 在 正常 状态 下 只 显示 1 个 选项 ， 单 
和 按钮 打开 菜单 后 才 会 看 到 全 部 选项 。 

基本 语法 : 

<select name=" 下 拉 菜 单 的 名 称 "> 

<option value=" 选 项 值 "selected> 选 项 显示 内 容 </option> 














[= 
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</select> 


语法 说 明 : 
在 该 语法 中 ，“ 选 项 值 ”是 提交 表单 时 的 值 ， 而 “选项 显示 的 内 容 ” 才 是 真正 在 页 面 





中 要 显示 的 。selected 表示 该 选项 在 默认 情况 下 是 选中 的 ， 一 个 下 拉 菜 单 中 只 能 有 1 项 被 
选中 。 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 选 择 列表 条 目 元 素 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
<tqd> 
<form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="multipart/form-data"target=" blank" > 
<p> 所 在 地 区 : </p> 
<p> 
<select name="select"> 
<option value="1"> 北 京 </option> 
<option value="2"> 上 海 </option> 
<option value="3"> 深 圳 </option> 
<option value="4"> 山 东 </option> 
<option value="5"> 广 东 </option> 
<option value="6"> 广 州 </option> 
<option value="7"> 江 苏 </option> 
</select> 
</p> 
<input type="submit" name="button" value=" 提 交 "> 
</form> 
</td> 
< 
</table> 
</body> 
</html> 


加 粗 的 代码 表示 下 拉 菜 单 ， 名 称 为 select， 下拉 菜单 中 包括 7 个 菜单 项 , 在 浏览 器 中 浏 

















览 效 果 如 图 8-11 所 示 。 
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- OO x 
全 DAHTML+DIV+CSsR ”0C 感 运 汉 列表 条 且 元 素 
文件 中] 。 编 强 (E) ”可 看 V) 收藏 夫 (A) 工具 (D) 。 帮助 (H) 




















8-11 设置 下 拉 菜 单 


8.4 选择 列表 标签 : <select> 


列表 项 在 页 面 中 可 以 显示 出 几 条 信息 ， 一 旦 超出 这 个 信息 量 ， 在 列表 右 侧 会 出 现 滚动 
条 ， 拖 动 滚动 条 可 以 看 到 所 有 的 选项 。 


8.4.1 高 度 属性 : size 


用 size 属性 可 以 改变 下 拉 框 的 大 小 。 

基本 语法 : 

<select name=" 列 表 项 的 名 称 "” size=" 显 示 的 列表 项 数 "> 
<option value=" 选 项 值 "selected> 选 项 显示 内 容 (/option) 


</select> 


语法 说 明 : 

在 语法 中 ，size 的 属性 的 值 是 数字 ， 表 示 显 示 在 列表 中 的 选项 的 数目 ， 当 size 属性 的 
值 小 于 列表 框 中 的 列表 项 数目 时 ， 浏 览 器 会 为 该 下 拉 框 添加 滚动 条 ， 用 户 可 以 使 用 滚动 条 
来 查看 所 有 的 选项 ，size 默认 值 为 1 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 选 择 列表 元 素 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
> 
<td> 
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<form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="multipart/form-data"target=" blank" > 


<p> 所 在 地 区 : </p> 
<p> 
<select name="select" size="4" > 
<option value="1"> 北 京 </option> 
<option value="2"> 上 海 </option> 
<option value="3"> 深 圳 </option> 
<option value="4"> 山 东 </option> 
<option value="5"> 广 东 </option> 
<option value="6"> 广 州 </option> 
<option value="7"> 江 苏 </option> 
</select> 
</p> 


<input type="submit" name="button" value=" 提 交 "> 


</form> 
</td> 
</tr> 
</table> 
</body> 
</html> 


加 粗 的 代码 表示 将 列表 项 的 名 称 设置 为 select， 显 示 的 列表 中 的 列表 项 数 设 置 为 4， 在 


浏览 器 中 浏览 效果 如 图 8-12 所 示 。 





WD - 
文件 (篇 句 (E) ”查看 (V) ”收藏 交 (A) 工具 (T) 


所 在 地 区 ， 





扎 100% ~ 








图 8-12 设置 列表 项 的 高 度 


8.4.2 多 项 选择 属性 : multiple 


multiple 属性 规定 可 同时 选择 多 个 选项 。 可 以 把 multiple 属性 与 size 属性 配合 使 用 


定义 可 见 选 项 的 数目 。 
基本 语法 : 


<select name=" 列 表 项 的 名 称 "” size=" 显 示 的 列表 项 数 " multiple> 


<option value=" 选 项 值 "selected> 选 项 显示 内 容 </option> 


148 








第 8 章 ， 用 表意 创建 交互 式 网 页 


</select> 


语法 说 明 : 
如 果 加 上 multiple 属性 ， 表 示人 允许 用 户 从 列表 中 选择 多 项 。 
实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 选 择 列表 元 素 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
< 七 d> 
<form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="multipart/form-data"target=" blank" > 
<p> 所 在 地 区 : </p> 
<p> 
<select name="select" size="4" multiple > 
<option value="1"> 北 京 </option> 
<option value="2"> 上 海 </option> 
<option value="3"> 天 津 </option> 
<option value="4"> 河 北 </option> 
<option value="5"> 山 东 </option> 
<option value="6"> 广 州 </option> 
<option value="7"> 江 苏 </option> 
</select> 
</p> 
<input type="submit" name="button" value=" 提 交 "> 
</form> 
</td> 
EEC 
</table> 
</body> 
</html> 


加 粗 的 代码 表示 添加 了 multiple 多 项 属性 ， 在 浏览 器 中 浏览 效果 如 图 8-13 所 示 。 
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所 在 地 区 ， 


着 京 
上 海信 


天 当 
后 和 


[E 到 











或 100% = 





图 8-13 ”设置 列表 项 的 多 项 选择 


8.5 文本 区 域 标签 : <textarea> 


当 需 要 让 浏览 者 填 入 多 行文 本 时 ， 就 应 该 使 用 文本 区 域 而 不 是 文本 字段 了 。 和 其 他 大 
多 数 表单 对 象 不 一 样 ， 文 本 区 域 使 用 的 是 <textarea> 标 签 而 不 是 <input> 标 签 。 

基本 语法 : 

<textarea name=" 文 本 区 域 的 名 称 ” cols=" 长 度 "” rows=" 行 数 "></textarea> 

语法 说 明 : 

在 该 语法 中 ，cols 用 于 设置 文本 域 的 列 数 ， 也 就 是 其 宽度 值 。rows 用 于 设置 文本 域 的 
行 数 ， 也 就 是 其 高 度 值 ， 当 文本 内 容 超出 这 一 范围 时 会 出 现 滚动 条 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 文 本 区 域 元 素 </title> 
</head> 
<body> 
<table width="100%" cellspacing="0" cellpadding="0"> 
<Er> 
<td> 
<form action="mailto:weixiaofoxw.com" name="forml" method="post" 
enctype="multipart/form-data"target=" blank" > 
<p> 请 提出 宝贵 意见 : </p> 


<p> 
<textarea name="textarea" id="textarea" cols="50" rows="5"></textarea> 
</p> 

<input type="submit" name="button" value=" 提 交 "> 

</form> 
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</td> 
“</> 
</table> 
</body> 
</html> 


加 粗 的 代码 <textarea name="textarea" cols="50" rows="5"></textarea> 表 示 将 文本 区 域 的 
名 称 设置 为 textarea， 宽 度 设置 为 50， 行 数 设置 为 5， 在 浏览 器 中 浏览 效果 如 图 8-14 所 示 。 











六 
ET -< 全 xxKEx 志 
文人 锯 党 至 看 (V) 忆 基 夫人 A) 工具 T) 帮助 (H) 
请 提出 宝贵 章 见 ， 
提交 
所 100% 








8-14 设置 文本 区 域 


本 章 小 结 


表单 的 用 途 很 多 ， 在 制作 网 页 时 ， 特 别 是 制作 注册 页 时 常常 会 用 到 。 表 单 的 作用 就 是 
收集 用 户 的 信息 ， 将 其 提交 到 服务 器 ， 从 而 实现 与 使 用 者 交互 。 表 单 是 HTML 页 面 与 服务 
器 实现 交互 的 重要 手段 。 本 章 主要 讲述 了 表单 元 素 、 表 单 控件 、 选 择 列表 条 目 元 素 等 标签 
的 基本 应 用 。 








练 习 题 

1. 填空 题 

(1) 在 网 页 中 标记 对 用 来 创建 一 个 表单 , 即 定 义 表单 的 开始 和 结束 
位 置 ， 在 标记 对 之 间 的 一 切 都 属于 表单 的 内 容 。 

(2) 目标 窗口 的 打开 方式 有 4 个 选项 : 和 5 
其 中 为 将 链接 的 文件 载 入 一 个 未 命名 的 新 浏览 器 窗口 中 ; 为 将 链接 的 文 
件 载 入 含有 该 链接 框架 的 父 框架 集 或 父 窗口 中 ; 为 将 链接 的 文件 载 入 该 链接 所 在 
的 同一 框架 或 窗口 中 ; 为 在 整个 浏览 器 窗口 中 载 入 所 链接 的 文件 ， 因 而 会 删除 所 
有 框架 。 

(3) 菜单 和 列表 主要 是 为 了 节省 页 面 的 空间 ， 它 们 都 是 通过 和 标记 
来 实现 的 。 
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2. 操作 题 
制作 一 个 留言 表单 ， 如 图 8-15 所 示 。 
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8-15 ”表单 效果 
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第 9 章 HTML 5 的 结构 


【学 习 目 标 】 

HTML 5 是 一 种 网 络 标准 ， 相 比 现 有 的 HTML4.01 和 XHTML 1.0， 可 以 实现 更 强 的 
页 面 表现 性 能 ， 同 时 充分 调用 本 地 的 资源 ， 实 现 不 输 于 APP 的 功能 效果 。HTML 5 带 给 了 
浏览 者 更 好 的 视觉 冲击 , 同时 让 网 站 程序 员 与 HTML 语言 更 好 地 “沟通 ”。 虽然 现在 HTML 
5 还 没有 完善 ， 但 是 使 得 以 后 的 网 站 建设 拥有 更 好 的 发 展 。 

本 章 主要 内 容 包 括 : 

(1) 认识 HIML 5; 

(2) HTML 5 的 新 特性 ; 

(3) HTML 5 与 HTML 4 的 区 别 ; 

(4) 新 增 的 主体 结构 元 素 ; 

(5) 新 增 的 非 主体 结构 元 素 。 


9.1 认识 HTML 5 


HTML 最 早 是 作为 显示 文档 的 手段 出 现 的 。 再 加 上 JavaScript， 它 其 实 已 经 演变 成 了 一 
个 系统 ， 可 以 开发 搜索 引擎 、 在 线 地 图 、 邮 件 阅 读 器 等 各 种 Web 应 用 。 虽 然 设计 巧妙 的 
Web 应 用 可 以 实现 很 多 令 人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 事 。 多 数 都 得 手动 编写 
大 量 JavaScript 代码 ， 还 要 用 到 JavaScript 工具 包 ， 帮 至 在 Web 服务 器 上 运行 的 服务 器 端 
Web 应 用 。 要 让 所 有 这 些 方面 在 不 同 的 浏览 器 中 都 能 紧密 配合 不 出 差错 是 一 个 挑战 。 由 于 
各 大 浏览 器 厂商 的 内 核 标准 不 一 样 ， 使 得 Web 前 端 开发 者 通常 在 因 兼 容 性 问题 而 引起 的 
Bug 上 要 浪费 很 多 的 精力 。 

HIML 5 是 2010 年 正式 推出 来 的 ， 随 即 引 起 了 世界 上 各 大 浏览 器 开发 商 的 极 大 热情 ， 
不 管 是 Fire fox，Chrome 还 是 正 9 等 。 那 HTML 5 为 什么 会 如 此 受 欢迎 呢 ? 

在 新 的 HTML 5 语法 规则 当中 ， 部 分 的 JavaScript 代码 将 被 HTML 5 的 新 属性 所 替代 ， 
部 分 的 DIV 的 布局 代码 也 将 被 HTML 5 变 为 更 加 语义 化 的 结构 标签 , 这 使 得 网 站 前 端的 代 
码 变 得 更 加 精练 、 简 洁 和 清晰 ， 让 代码 的 开发 者 也 更 加 地 一 目 了 然 代码 所 要 表达 的 意思 。 

HTML 5 是 一 种 设计 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 标准 的 和 直观 的 
标记 语言 来 使 Web 设计 和 开发 变 得 容易 起 来 .HTML 5 提供 了 各 种 切割 和 划分 页 面 的 手段 ， 
允许 你 创建 的 切割 组 件 不 仅 能 用 来 逻辑 地 组 织 站 点 ， 而 且 能 够 赋予 网 站 聚合 的 能 力 。 这 是 
HTML 5 富 于 表现 力 的 语义 和 实用 性 美学 的 基础 ，HTML 5 赋予 设计 者 和 开发 者 各 种 层面 
的 能 力 来 向 外 发 布 各 式 各 样 的 内 容 ， 从 简单 的 文本 内 容 到 丰富 的 、 交 互 式 的 多 媒体 无 不 包 
括 在 内 。 
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9.2 HTML 5 的 新 特性 


HTML 5 将 会 取代 1999 年 制定 的 HTML 4.01、XHTML 1.0 标准 ， 以 期 能 在 互联 网 应 
用 迅速 发 展 的 时 候 ， 使 网 络 标准 达到 符合 当代 的 网 络 需求 ， 为 桌面 和 移动 平台 带 来 无 颖 衔 
接 的 丰富 内 容 。 

1. 语义 特性 (Semantic) 

HTML 5 赋予 网 页 更 好 的 意义 和 结构 。 

2. 本 地 存储 特性 (OFFLINE & STORAGE) 


基于 HTML 5 开发 的 网 页 APP 拥有 更 短 的 启动 时 间 ， 更 快 的 联网 速度 ， 这 些 全 得 益 于 
HTML 5 APP Cache， 以 及 本 地 存储 功能 。 








3. 设备 访问 特性 (DEVICE ACCESS) 


自 Geolocation 功能 的 API 文档 公开 以 来 ,HTML 5 为 网 页 应 用 开发 者 们 提供 了 更 多 功 
能 上 的 优化 选择 ， 带 来 了 更 多 体验 功能 的 优势 。HTML 5 提供 了 前 所 未 有 的 数据 与 应 用 接 
入 开放 接口 ， 使 外 部 应 用 可 以 直接 与 浏览 器 内 部 的 数据 直接 相连 ， 例 如 视频 影音 可 直接 与 
Microphones 及 摄像 头 相连 。 

4. 连接 特性 (CONNECTIVITY) 

更 有 效 的 连接 工作 效率 ， 使 得 基于 页 面 的 实时 聊天 、 更 快速 的 网 页 游戏 体验 、 更 优化 
的 在 线 交 流 得 到 了 实现 。HTML 5 拥有 更 有 效 的 服务 器 推送 技术 ，Server-Sent Event 和 
WebSockets 就 是 其 中 的 两 个 特性 ， 这 两 个 特性 能 够 帮助 我 们 实现 服务 器 将 数据 “推送 ”到 
客户 端的 功能 。 

















5. 网 页 多 媒体 特性 (MULTIMEDIA) 


支持 网 页 端的 Audio、Video 等 多 媒体 功能 ， 与 网 站 自 带 的 APPS、 摄 像 头 、 影 音 功 能 
相得益彰 。 


6. 三 维 、 图 形 及 特效 特性 (3D, Graphics & Effects) 


基于 SVG、Canvas、WebGL 及 CSS 3 的 3D 功能 ， 用 户 会 惊叹 于 在 浏览 器 中 所 呈现 的 
惊人 视觉 效果 。 


7. 性 能 与 集成 特性 (Performance & Integration) 





没有 用 户 会 永远 等 待 你 的 Loading 一 一 HTML 5 会 通过 XMLHttpRequest2 等 技术 ,解决 
以 前 的 跨 域 等 问题 ， 帮 助 你 的 Web 应 用 和 网 站 在 多 样 化 的 环境 中 更 快速 地 工作 。 
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9.3 HTML 5 与 HTML 4 的 区 别 


HTML 5 是 最 新 的 HTML 标准 ，HTML 5 语言 更 加 精简 ， 解 析 的 规则 更 加 详细 。 针 对 
不 同 的 浏览 器 , 即使 出 现 语法 错误 也 可 以 显示 出 同样 的 效果 。 下 面 列 出 的 就 是 一 些 HTML4 
和 HTML 5 之 间 主 要 的 不 同 之 处 。 


9.3.1 HTML 5 的 语法 变化 


HTML 的 语法 是 在 SGML 语言 的 基础 上 建立 起 来 的 。 但 是 SGML 语法 非常 复杂 , 要 开 
发 能 够 解析 SGML 语法 的 程序 也 很 不 容易 ， 所 以 很 多 浏览 器 都 不 包含 SGML 的 解析 器 。 因 
此 ， 虽 然 HTML 基本 遵从 SGML 的 语法 ， 但 是 对 于 HTML 的 执行 ， 各 浏览 器 之 间 并 没有 
一 个 统一 的 标准 。 

在 这 种 情况 下 ， 各 浏览 器 之 间 的 兼容 性 和 互 操作 性 在 很 大 程度 上 取决 于 网 站 或 网 络 应 
用 程序 的 开发 者 们 在 开发 上 所 做 的 共同 努力 ， 而 浏览 器 本 身 始 终 是 存在 缺陷 的 。 

在 HTML 5 中 提高 Web 浏览 器 之 间 的 兼容 性 是 它 的 一 个 很 大 的 目标 , 为 了 确保 兼容 性 ， 
就 要 有 一 个 统一 的 标准 。 因 此 ,在 HTML 5 中 ， 就 围绕 着 这 个 Web 标准 ， 重 新 定义 了 一 套 
在 现 有 的 HTML 的 基础 上 修改 而 来 的 语法 , 使 它 运行 在 各 浏览 器 时 各 浏览 器 都 能 够 符合 这 
个 通用 标准 。 

因为 关于 HTML 5 语法 解析 的 算法 也 都 提供 了 详细 的 记载 , 所 以 各 Web 浏览 器 的 供应 
商 们 可 以 把 HTML 5 分 析 器 集中 封装 在 自己 的 浏览 器 中 。 最 新 的 Firefox( 默 认为 4.0 以 后 的 
版 本 ) 与 WebKit 浏览 器 的 引擎 中 都 迅速 地 封装 了 供 HTML 5 使 用 的 解析 器 。 


9.3.2 HTML 5 中 的 标记 方法 


下 面 我 们 来 看 看 在 HIML 5 中 的 标记 方法 。 


1. 内 容 类 型 
HIML 5 文件 扩展 名 仍然 为 “html” 或 “.htm”, 内 容 类 型 (ContentType) 仍 然 为 “texthtml”。 








2. DOCTYPE 声明 

<!DOCTYPE html> 

HTML 5 中 不 可 以 使 用 版 本 声明 ， 一 份 文档 将 适用 于 所 有 版 本 的 HTML。 
3. 指定 字符 编码 


HIML 5 中 可 以 使 用 <meta> 元 素 直接 追加 charset 属性 的 方式 来 指定 字符 编码 : <meta 
charset="UTF-8">:;。 
HTML4 中 使 用 <meta http-equiv="Content-Type" content="text/html:charset=UTF-8"> 继 
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续 有 效 ， 但 不 能 同时 混合 使 用 两 种 方式 。 
HTML 5 中 对 于 文件 的 字符 编码 推荐 使 用 UTF-8。 
4. 具有 boolean 值 的 属性 


当 只 写 属性 而 不 指定 属性 值 时 表示 属性 为 tue， 也 可 以 将 属性 名 设 定 为 属性 值 或 将 空 
字符 串 设 定 为 属性 值 ， 如 果 想 要 将 属性 值 设置 为 false, 可 以 不 使 用 该 属性 。 




















5. 引号 
指定 属性 时 属性 值 两 边 既 可 以 用 双 引 号 ， 也 可 以 用 单 引号 。 当 属性 值 不 包括 空 字符 串 、 
“<”、“>”、“=”、 单 引号 、 双 引号 等 字符 时 ， 属 性 两 边 的 引号 可 以 省 略 。 例 如 : <input 


es <input type='text> <input type=text>。 


9.3.3 HTML 5 语法 中 的 3 个 要 点 

HTML 5 中 规定 的 语法 ， 在 设计 上 兼顾 了 与 现 有 HIML 之 间 最 大 程度 的 兼容 性 。 下 
就 来 看 看 具体 的 HTML 5 语法 。 

1， 可 以 省 略 标签 的 元 素 


在 HTML 5 中 ， 有 些 元 素 可 以 省 略 标签 ， 具 体 来 讲 有 3 种 情况 。 
(1) 必须 写 明 结束 标签 。 


<area>、 <base>、 <br>、 <col>、 <command>、 <embed>、 <hr>、 <img>、 <input>、<keygen>、 























<link>、<meta>、<param>、<source>、<track>、<wbr> 

(2) 可 以 省 略 结 束 标签 。 

<li>、<dt>、<dd>、<p>、<Ir、<Ip>、<optgroup>、<option>、<colgroup>、<thead>、 
<tbody>、<tfoot>、<tr>、<td>、<th> 

(3) 可 以 省 略 整 个 标签 。 

<html>、<head>、<body>、<colgroup>、<tbody> 

需要 注意 的 是 ， 虽 然 这 些 元 素 可 以 省 略 ， 但 实际 上 却 是 隐形 存在 的 。 

例如 : “<body>” 标 签 可 以 省 略 ， 但 在 DOM 树 上 它 是 存在 的 ， 可 以 永恒 访问 到 


“documentbody” 


2. 取得 boolean 值 的 属性 


取得 布尔 值 (boolean) 的 属性 ， 例 如 disabled 和 readonly 等 ， 通 过 默认 属性 的 值 来 表达 
值 为 true。 

此 外 ， 在 写 明 属性 值 来 表达 值 为 tue 时 ， 可 以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 以 将 
值 设 为 空 字符 串 。 


<!-- 以 下 的 checked 属性 值 皆 为 上 true--> 
<input type="checkbox" checked> 
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<input type="checkbox" checked="checked"> 
<input type="checkbox" checked=""> 


3. 省 略 属性 的 引用 符 


在 HIML4 中 设置 属性 值 时 ， 可 以 使 用 双 引 号 或 单 引号 来 引用 。 

在 HTML 5 中 ， 只 要 属性 值 不 包含 空 洛 、“<”、“>”、“ “0 ee” 
等 字符 ， 都 可 以 省 略 属性 的 引用 符 。 

例如 : 

<input type="text"> 

<input type='text'> 

<input type=text> 











9.4 ”新 增 的 主体 结构 标签 


在 HIML 5 中 ， 为 了 使 文档 的 结构 更 加 清晰 明确 ， 容 易 阅读 ， 增 加 了 很 多 新 的 结构 元 
素 ， 如 页 眉 、 页 脚 、 内 容 区 块 等 结构 元 素 。 


9.4.1 <article> 标 签 


<article> 标 签 规定 独立 的 自 包含 内 容 。 一 篇 文章 应 有 其 自身 的 意义 , 应 该 有 可 能 独立 于 
站 点 的 其 余部 分 对 其 进行 分 发 。 

<article> 元 素 的 潜在 来 源 : 论坛 帖子 、 报 纸 文章 、 博 客 条 目 、 用 户 评论 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<article> 
<header> 
<h1> 幸 运 ， 是 勤奋 努力 后 发 出 的 光 </h1> 
<p> 发 表 日 期 : <time pubdate="pubdate">2016/09/09</time></p> 
</header> 
<p> 我 们 总 是 喜欢 将 别人 的 成 功 归 因 于 运气 ， 而 将 自己 的 成 功 归 因 于 聪明 ， 于 是 每 个 人 都 不 喜 
欢 把 自己 艰辛 努力 的 过 程 去 告诉 他 人 ， 好 像 努 力 是 一 件 很 示人 的 事情 。 可 是 ， 机 遇 喜 欢 眷顾 的 从 来 
都 不 是 天 赋 极 好 的 聪明 人 士 ， 而 是 勤奋 努力 的 人 。</P> 
<Eooter> 
<p><smal11> 版 权 所 有 8 星云 文学 社 </smal11></P> 


</Eooter> 
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</article> 
</body> 
</html> 





在 <header> 标 签 中 嵌入 了 文章 的 标题 部 分 ， 在 <h1> 标 签 中 是 文章 的 标题 “幸运 ， 是 勤 











文件 朋 ”六 各 6 可 看 V) 收藏 大/A) 工具 DB 

















奋 努 力 后 发 出 的 光 ”， 文 章 的 发 表 日 期 在 <p> 标 签 中 。 在 标题 下 部 的 <p> 标 签 中 是 文章 的 正 
文 ， 在 结尾 处 的 <footer> 标 签 中 是 文章 的 版 权 。 对 这 部 分 内 容 使 有 
器 中 效果 如 图 9-1 所 示 。 


- OO x 


MD - ¢ | BG eee 


幸运 ， 是 勤奋 努力 后 发 出 的 光 


发 表 日 期 : 2016/09/09 
我 们 总 是 喜欢 将 别人 的 成 功 归 因 于 运气 ， 由 于 是 每 个 人 都 不 


喜欢 把 自己 艰 手 努力 的 过 程 去 告诉 他 人 ， 好 像 努 力 是 一 人 的 事情 。 可 是 ,机遇 喜 


欢 尖 顾 的 从 来 都 不 是 天 赋 极 好 的 聪明 人 十 ， 仙人 人 
版 权 所 有 四 星云 文学 社 





了 <article> 标 签 。 在 浏览 








图 9-1 <article> 标 签 
9.4.2 ”<section> 标 签 
<section> 标 签 定义 文档 中 的 节 (section)。 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 
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<section> 标 签 用 于 对 网 站 或 应 用 程序 中 页 面 上 前 内容 半生 全 亿 。 
常 由 内 容 及 其 标题 组 成 。 但 <section> 标 签 也 并 非 一 个 普通 的 容器 元 素 
重新 定义 样式 或 者 定义 脚本 行为 的 时 候 ， ae DIV 控制 。 


实例 代码 : 











<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


</head> 
<body> 
<section> 


<h1> 体 育 项 目 </h1> 
<p> 为 了 强身 祛 病 、 娱 乐 身 心 及 提高 运动 技术 水 平 所 采用 的 各 项 活动 内 容 和 方法 的 总 称 。 通 常 
也 叫 运动 项 目 或 体育 手段 。</P> 


</section> 





一 个 <section> 标 签 通 


， 当 一 个 容器 需要 被 
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下 面 是 一 个 带 有 section 元 素 的 article 元 素 例子 。 
<article> 
<h1> 跳 水 </h1> 
<p> 跳 水 是 一 项 优美 的 水 上 运动 ， 它 是 从 高 处 用 各 种 姿势 跃 入 水 中 或 是 从 跳水 器 械 上 起 跳 ， 在 
空中 完成 一 定 动 作 姿势 ， 并 以 特定 动作 入 水 的 运动 。</p> 
<section> 
<h2> 田 径 </h2> 
<p> 田 径 运 动 是 田 赛 、 径 赛 和 全 能 比赛 的 总 称 。</p> 
</section> 
<section> 
<h2> 篮 球 </h2> 
<p> 篮 球 (basketbal1) 是 奥运 会 核心 比赛 项 目 ， 是 以 手 为 中 心 的 对 抗 性 体育 运动 。 篮 球 
运动 起 源 于 美国 。</p> 
</section> 
</article> 
</body> 
</html> 


从 上 面 的 代码 可 以 看 出 ， 首 页 整体 呈现 的 是 一 段 完 整 独立 的 内 容 ， 所 有 我 们 要 用 
<article> 标 签 包 起 来 ， 这 其 中 又 可 分 为 3 段 ， 每 一 段 都 有 一 个 独立 的 标题 ， 使 用 了 两 个 
<section> 标 签 为 其 分 段 。 这 样 使 文档 的 结构 显得 清晰 。 在 浏览 器 中 效果 如 图 9-2 所 示 。 


= EE 
Eo 


体育 项 目 

为 了 强身 社 病 、 娱 乐 对 心 及 提高 运动 技术 水 平 疡 条 用 的 各 项 活动 内 容 和 方法 的 总 称 。 通 常 也 叫 运动 项 目 或 体育 手段 
下 面 是 一 个 带 有 section 元 素 的 aricle 元 素 例子 

跳水 


跳水 是 一 项 优美 的 水 上 运动 ， 它 是 从 高 处 用 各 种 姿势 跃 入 水 中 或 是 从 跳水 费 械 上 起 跳 ， 在 空中 完成 一 定 动作 流 势 ， 并 
以 特定 动作 入 水 的 运动 


田径 
田径 运动 是 田 春 、 径 赛 和 全 能 比赛 的 总 称 . 
复 球 


篇 球 (basketball) 是 良 运 会 核心 比赛 项 目 ， 是 以 手 为 中 心 的 对 抗 性 体育 运动 。 答 球 运动 起 苦于 美国 。 






p+ 6 | asme 
I WII 





图 9-2” 带 有 <section> 标 签 的 <article> 标 签 实例 


9.4.3 ”<nav> 标 签 


<nav> 标 签 在 HTML 5 中 用 于 包裹 一 个 导航 链接 组 ， 用 于 显 式 地 说 明 这 是 一 个 导航 组 ， 
在 同一 个 页 面 中 可 以 同时 存在 多 个 <nav>。 

并 不 是 所 有 的 链接 组 都 要 被 放 进 <nav> 元 素 ， 只 需 将 主要 的 、 基 本 的 链接 组 放 进 <nav> 
标签 即 可 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服 务 条 款 、 首 页 、 版 权 声 明 等 ， 这 时 
使 用 <footer> 标 签 最 恰当 。 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 





<meta charset="utf-8"> 
<title> 导 航 </title> 
</head> 
<body> 
<header> 
<h1> 网 站 导航 
<hl> 
<nav> 
<ul> 
<li><a href="index.html"> 首 页 </a></1i> 
<li><a href="about.html"> 关 于 我 们 </a></1i> 
<1Li><a href="bbs .html"> 联 系 我 们 </a></1i> 
</ul> 
</nav> 
</hl></h1> 
</header> 
</body> 
</html> 


这 个 实例 是 页 面 之 间 的 导航 , <nav> 标 签 中 包含 了 3 个 用 于 导航 的 超级 链接 , 即 “首页 ”、 
“关于 我 们 ”和 “联系 我 们 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导 
航 。 运 行 代 码 结果 如 图 9-3 所 示 。 


Eo - ¢ | G sm 
L 文 # 久 涡 (E) “ 音 看 (V) 收藏 到 (A) 工具 (T) 者 彻 (H) 


网 站 导航 


. 联系 我 人 











夸 100% ~ 





9-3 ”网 站 导航 


9.4.4 <aside> 标 签 


<aside> 标 签 用 来 表示 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 
内 容 相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 
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实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<aside> 
<h2> 新 闻 资 讯 </h2> 
<ul> 
<1i> 企 业 新 闻 </1i> 
<1i> 行 业 信息 </1i> 
</ul> 
<h2> 经 营 产品 </h2> 
<ul> 
<1i> 毛 衣 </1i> 
<1i> 牛 仔裤 </1i> 
<1i> 鞋 子 </1i> 
</ul> 

</aside> 
</body> 

</html> 


<side> 标 签 作 为 页 面 或 站 点 全 局 的 附属 信息 部 分 ， 在 浏览 器 中 浏览 效果 如 图 9-4 所 示 。 


© DEES 六 -< sms 
文件 (篇 刍 (E) 音 看 (V) 收 茅 闪 (A) 工具 (T) 。 蓝 动 (H) 


新 闻 资 讯 


* 企业 新 闻 
* 行业 信息 








经 营 产品 


* 毛衣 
*。 牛仔 裤 
"鞋子 








和 100% ~ 





图 9-4 ”<aside> 标 签 实例 


9.4.5 ”<time> 标 签 


<time> 是 HTML 5 新 增加 的 一 个 标签 , 用 于 定义 时 间或 日 期 该 标签 可 以 代表 24 小 时 

中 的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 标签 的 属 
性 “datetime” 设 为 相应 的 时 间或 日 期 即 可 。 
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期 ， 





实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<article> 
<header> 
<h1> 圣 诞 节 舞会 通知 </h1> 
<p> 发 布 日 期 
<time datetime="2016-12-11" pubdate>2016 年 12 月 11 日 </time> 
</p> 
</header> 
<p> 大 家 好 ， 我 是 梦 圆 幼儿 园 的 代表 . . . .. . </p> 
</article> 
</body> 
</html> 


加 粗 的 代码 即 <time> 标 签 代表 了 文章 (<article> 标 签 里 的 内 容 ) 或 者 整个 网 页 的 发 布 日 
在 浏览 器 中 浏览 效果 如 图 9-5 所 示 。 





名] ET 村 车 几 - 必 ， 感 无 款 权 文档 
文件 (篇 句 (E) ”前 看 (V) 收藏 夫 (A) ”工具 (D) 。 帮助 (H) 


发 布 日 期 2016 年 12 月 11 日 
大 家 好 ， 我 是 梦 圆 幼儿 园 的 代表 … 








瑟 100%6 > 





图 9-5 ”<time> 标 签 实例 


9.4.6 pubdate 属性 
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pubdate 属性 指示 <time> 元 素 中 的 日 期 /时 间 是 文档 的 发 布 日 期 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
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<title> 无 标题 文档 </title> 

</head> 

<body> 

<article> 

<time datetime="2016-06-22" pubdate="pubdate"></time> 
大 家 好 ， 欢 迎 光临 我 的 主页 . . . . 

</article> 

</body> 

</html> 


在 浏览 器 中 浏览 效果 如 图 9-6 所 示 。 
6 


TS Po- ¢ Seuss 
文 # 四 ”六 看 日 二 在 忆 大雪 内。 工具。 才 (H) 
大 家 好 ， 欢 迎 光临 我 的 主页 





我 100% 


图 9-6 pubdate 属性 


9.5 ”新 增 的 非 主体 结构 标签 


除了 以 上 几 个 主要 的 结构 元 素 之 外 ，HTML 5 还 增加 了 一 些 表示 逻辑 结构 或 附加 信息 
的 非 主体 结构 元 素 。 


9.5.1 <header> 标 签 


<header> 标 签 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 
内 的 一 个 内 容 区 块 的 标题 , <header> 内 也 可 以 包含 其 他 内 容 , 例如 表格 、 表 单 或 相关 的 Logo 
图 片 。 

实例 代码 : 

<!doctype html> 


<html> 
<head> 





<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<header> 

<hgroup> 
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<h1> 人 一 生 要 去 的 50 个 地 方 </h1> 
<p> 通 过 《人 一 生 要 去 的 50 个 地 方 》， 你 可 以 更 深入 地 了 解 这 些 地 方 的 人 文 、 历 史 、 景 观 、 风 
士 人 情 等 ， 书 中 文字 诠释 ， 让 你 在 不 知 不 觉 中 展开 一 段 愉悦 的 精神 之 旅 。</P> 
</hgroup> 
<nav> 
<ul> 
<1i> 第 一 部 顶尖 城市 </1i> 
<1i> 第 二 部 野外 探险 </1i> 
<1i> 第 三 部 度假 胜地 </1i> 
</ul> 
</nav> 
</header> 
</body> 
</html> 


在 HIML 5 中 ， 一 个 <header> 标 签 通常 包括 至 少 一 个 headering 标签 (<h1> 一 <h6>)， 也 
可 以 包括 <hgroup><nav> 等 标签 。 加 erg Ae 实例 , 运行 代码 结果 如 图 9-7 
所 示 。 


EREEE 
交 件 (各 和 (和 可 看 (V) 收 训 夫 A】 工具 MT) 大 却 (H) 


人 一 生 要 去 的 50 个 地 方 


通过 和 人 一 生 要 去 的 50 个 地 方 》， 你 可 以 更 
下 入 


地 了 解 这 些 地 方 的 人 文 、 历 史 、 
观 、 风 土 人 情 等 ， 书 中 文字 诠释 ， 和 筑 


和 站 六 并 入 在 机 全 笑 宰 性 、 





市 
* 第 二 向 探险 
。 第 三 部 度假 胜地 


可 100% ~ 


图 9-7 <header> 标 签 使 用 实例 


9.5.2 ”<hgroup> 标 签 


<header> 标 签 位 于 正文 开头 ， 可 以 在 这 些 标签 中 添加 <h1> 标 签 ， 用 于 显示 标题 。 基 本 
上 ，<hl> 标 签 已 经 足够 用 于 创建 文档 各 部 分 的 标题 行 。 但 是 ， 有 时 候 还 需要 添加 副标题 或 
其 他 信息 ， 以 说 明 网 页 或 各 节 的 内 容 。 

<hgroup> 标 签 是 将 标题 及 其 子 标题 进行 分 组 的 标签 。 Sa 
<h6> 标 签 进行 分 组 ， 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<article> 
<header> 
<hgroup> 
<h1> 三 亚 旅游 景点 介绍 </h1> 
<h2> 三 亚 </h2> 
</hgroup> 
<p> 
<time datetime="2013-05-20">2016 年 05 月 20 日 </time></p> 
<p> 三 亚 北 靠 高 山 ， 南 临 大 海 ， 地势 自 北向 南 逐 渐 倾斜 形成 一 个 狭长 的 多 角形 。 境 内 海岸 线 长 
258. 65 千 米 ， 有 大 小 港湾 19 个 。 主 要 港口 有 三 亚 港 、 榆 林 港 、 南 山 港 、 铁 炉 港 、 六 道 港 等 。</p> 


</header> 
</article> 
</body> 
</html> 
加 粗 的 代码 是 运用 了 <hgroup> 标 签 显示 标题 ， 运 行 代码 效果 如 图 9-8 所 示 。 
一 口 X 
© EPE DO - | S rmx 
文件 (P 病句 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
Rg BR 
三 亚 旅游 景点 介绍 
= 亚 
2016 年 05 月 20 晶 


三 亚 北 靠 高 山 A 地 势 自 北向 南 逐 渐 倾 料 ， 形 成 一 个 独 长 的 多 角形 。 境 
内 海上 ， 有 大 小 港湾 19 个 。 主 要 港口 有 三 亚 港 、 榆 林 港 、 南 山 港 、 








或 100% > 





图 9-8 <hgroup> 标 签 实例 


9.5.3 ”<footer> 标 签 


<footer> 通 常 包括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信 息 等 。 
<footer> 标 签 和 <header> 标 签 使 用 基本 上 一 样 ， 可 以 在 一 个 页 面 中 使 用 多 次 ， 如 果 在 一 
段 后 面 加 入 <footer> 标 签 ， 那 么 它 就 相当 于 该 区 段 的 尾部 了 。 

在 HIML 5 出 现 之 前 ， 通 常 使 用 类 似 下 面 的 方法 来 写 页 面 的 页 脚 。 

<div id="footer"> 


<ul> 
<1i> 版 权 信息 </1i> 


区 
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<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 
</ul> 
<div> 


在 HTML 5 中 ， 可 以 不 使 用 <div>， 而 用 更 加 语义 化 的 <footer> 来 写 。 


<footer> 
<ul> 
<1i> 版 权 信 息 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 
</ul> 
</footer> 


<footer> 标 签 既 可 以 用 作 页面 整 体 的 页 脚 ,也 可 以 作为 一 个 内 容 区 块 的 结尾 , 例如 可 以 
将 <footer> 直 接 写 在 <section> 或 是 <article> 中 。 
在 <article> 标 签 中 添加 <footer> 标 签 。 





<article> 
文章 内 容 
<footer> 
文章 的 脚注 
</footer> 
</article> 


在 <section> 标 签 中 添加 <footer> 标 签 。 
<section> 

分 段 内 容 

<footer> 


分 段 内 容 的 脚注 
</footer> 
</section> 


9.5.4 <address> 标 签 


<address> 标 签 通常 位 于 文档 的 末尾 ， 用 于 在 文档 中 呈现 联系 信息 ， 包 括 文档 创建 者 的 
名 字 、 站 点 链接 、 电 子 邮箱 、 真 实地 址 、 电 话 号 码 等 。<address> 不 只 是 用 来 呈现 电子 邮箱 
或 真实 地 址 这 样 的 “地 址 ”概念 ， 而 应 该 包括 与 文档 创建 人 相关 的 各 类 联系 方式 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>address 元 素 实例 </title> 
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</head> 

<body> 

<address> 

<a href="mailto:example@example.com"> 网 站 建设 </a><br /> 
山东 建设 公司 <br /> 

历 下 区 58 号 <br /> 

</address> 

</body> 

</html> 


浏览 器 中 显示 地 址 的 方式 与 其 周围 的 文档 不 同 ， 了 下 、Firefox 和 Safari 浏览 器 以 斜体 显 
示 地 址 ， 运 行 代码 效果 如 图 9-9 所 示 。 























- _ 0O x 
人 EE 1 ~ < G a4dress 元 素 <n 
文件 (里 友 (E) 和 看 V) 收藏 天 A) 工具 [T) 帮 双 (H) 
下 1006 ~ 





9-9 <address> 标 签 实例 


本 章 小 结 


自 HTML4 诞生 以 来 ， 整 个 互联 网 环境 、 硬 件 环境 都 发 生 了 翻天 覆 地 的 变化 ， 开 发 者 
期 望 标准 统一 、 用 户 渴望 更 好 体验 的 呼声 越 来 越 高 。2010 年 ， 随 着 HTML 5 的 迅猛 发 展 ， 
各 大 浏览 器 开发 公司 如 谷歌 、 微 软 、 苹 果 和 Opera 的 浏览 器 开发 业务 都 变 得 异常 繁忙 。 在 
这 种 局 势 下 ， 学 习 HIML 5 无 疑 成 为 Web 开发 者 的 一 大 重要 任务 ， 谁 先 学 会 HTML 5， 谁 
就 掌握 了 迈 向 未 来 Web 平台 的 一 把 钥匙 。 


练 习 题 
1. 填空 题 
(1) pee 一 篇 文章 应 有 其 自身 的 意义 ， 应 该 有 可 能 独 
立 于 站 点 的 其 余部 分 对 其 进行 分 
@Q) ed hte EO 


航 组 ， 在 同一 个 页 面 中 可 以 同时 存在 多 个 
(3) <time> 是 HTML 5 新 增加 的 一 个 标签 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 
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小 时 中 的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 
的 属性 设 为 相应 的 时 间或 日 期 即 可 。 


2. 操作 题 
制作 一 个 网 站 导航 效果 ， 如 图 9-10 所 示 。 














此 Po Em 
文件 (久久 (EF) 查看 V) 站 苹 交 (A) 工具 (T) 帮助 H) 
拒 100% 





9-10 ”网 站 导航 
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【学 习 目标 】 

对 于 一 个 网 页 设计 者 来 说 , 对 HTML 语言 一 定 不 感到 陌生 , 因为 它 是 网 页 制作 的 基础 ， 
但 是 如 果 希 望 网 页 能 够 美观 、 大 方 , 并 且 升 级 维护 方便 , 那么 仅仅 知道 HTML 还 是 不 够 的 ， 
还 需要 了 解 CSS。 了 解 CSS 基础 知识 ， 可 以 为 后 面 的 学 习 打 下 基础 。 

本 章 主要 内 容 包括 : 

(1) 为 什么 在 网 页 中 加 入 CSS; 

(2) 基本 的 CSS 选择 器 ; 

(3) 在 HTML 中 使 用 CSS; 

(4) 设置 CSS 属性 。 


10.1 为 什么 要 在 网 页 中 加 入 CSS 


CSS 是 Cascading Style Sheet 的 缩写 ， 又 称 为 “ 层 登 式样 式 表 ”， 简 称 为 样式 表 。 它 是 
一 种 制作 网 页 的 新 技术 ， 现 在 已 经 为 大 多 数 浏览 器 所 支持 ， 成 为 网 页 设计 必 不 可 少 的 工具 
六 二 % 


10.1.1 什么 是 CSS 


网 页 最 初 是 用 HTML 标签 来 定义 页 面 文档 及 格式 , 如 标题 <hl>、 段落 <p>、 表格 <table> 
等 。 但 这 些 标签 不 能 满足 更 多 的 文档 样式 需求 ， 为 了 解决 这 个 问题 ， 在 1997 年 W3C 颁布 
HTML 4 标准 的 同时 也 公布 了 有 关 样 式 表 的 第 一 个 标准 一 一 CSS 1。 自 CSS 1 版 本 之 后 ， 又 
在 1998 年 5 月 发 布 了 CSS 2 版 本 ， 样 式 表 得 到 了 更 多 的 充实 。 使 用 CSS 能 够 简化 网 页 的 
格式 代码 ， 加 快 下 载 显示 的 速度 ， 也 减少 了 需要 上 传 的 代码 数量 ， 大 大 减少 了 重复 劳动 的 
工作 量 。 

样式 表 的 首要 目的 是 为 网 页 上 的 元 素 精确 定位 。 其 次 ， 它 把 网 页 上 的 内 容 结构 和 格式 
控制 相 分 离 。 浏 览 者 想 要 看 的 是 网 页 上 的 内 容 结构 ， 而 为 了 让 浏览 者 更 好 地 看 到 这 些 信息 ， 
就 要 通过 格式 来 控制 。 内 容 结 构 和 格式 控制 相 分 离 ， 使 得 网 页 可 以 仅 由 内 容 构 成 ， 而 将 网 
页 的 格式 通过 CSS 样式 表 文件 来 控制 。 

网 页 设计 中 我 们 通常 需要 统一 网 页 的 整体 风格 ， 统 一 的 风格 大 部 分 涉及 网 页 中 文字 属 
性 、 网 页 背景 色 以 及 链接 文字 属性 等 ， 如 果 我 们 应 用 CSS 来 控制 这 些 属性 ， 会 大 大 提高 网 
页 的 设计 速度 ， 更 加 统一 网 页 总 体 效 果 。 

例如 图 10-1 和 图 10-2 所 示 的 网 页 分 别 为 使 用 CSS 前 后 的 效果 。 
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图 10-1 使 用 CSS 前 图 10-2 使 用 CSS 后 


10.1.2 使 用 CSS 的 好 处 


掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 Web 标准 的 基础 。 在 制作 网 页 时 采用 CSS 技 
术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 
对 相应 的 代码 做 一 些 简 单 的 修改 ， 就 可 以 改变 网 页 的 外 观 和 格式 。 采 用 CSS 有 以 下 好 处 。 
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大 大 缩减 页 面 代 码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 

结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 用 只 包含 结构 化 内 容 的 HIML 代 蔡 嵌 套 的 标 
签 ， 搜 索引 擎 将 更 有 效 地 搜索 到 内 容 。 

缩短 改版 时 间 。 只 要 简单 地 修改 几 个 CSS 文件 就 可 以 重新 设计 一 个 有 成 百 上 千 页 
面 的 站 点 。 
强大 的 字体 控制 和 排版 能 力 。 使 页 面 的 字体 变 得 更 漂亮 ， 更 容易 编排 ， 使 页 面 真 
正 赏心悦目 。 

提高 易 用 性 。 使 用 CSS 可 以 结构 化 HIML， 如 <p> 标 签 只 用 来 控制 段落 ，<hl> 一 
<h6> 标 签 只 用 来 控制 标题 ，<table> 标 签 只 用 来 表现 格式 化 的 数据 等 。 

表现 和 内 容 相 分 离 。 将 设计 部 分 分 离 出 来 放 在 一 个 独立 样式 文件 中 。 

<table> 布 局 灵活 性 不 大 ， 只 能 遵循 <table><tr><td> 的 格式 ， 而 <div> 可 以 有 各 种 
格式 。 

<table> 布 局 中 ， 垃 圾 代码 会 很 多 ， 一 些 修饰 的 样式 及 布局 的 代码 混合 在 一 起 ， 很 
不 直观 ， 而 <div> 更 能 体现 样式 和 结构 相 分 高 ， 结 构 的 重 构 性 强 。 
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@ ”以 前 一 些 必须 通过 图 片 转换 实现 的 功能 ， 现 在 只 要 用 CSS 就 可 以 轻松 实现 ， 从 而 
更 快 地 下 载 页 面 。 

@ ”可 以 将 许多 网 页 的 风格 格式 同时 更 新 ， 不 用 再 一 页 一 页 地 更 新 了 。 可 以 将 站 点 上 
所 有 的 网 页 风格 都 使 用 一 个 CSS 文件 进行 控制 , 只 要 修改 这 个 CSS 文件 中 相应 的 
行 ， 那 么 整个 站 点 的 所 有 页 面 都 会 随 之 发 生变 动 。 


10.1.3 ”如 何 编写 CSS 


CSS 的 文件 与 HTML 文件 一 样 ， 都 是 纯 文本 文件 ， 因 此 一 般 的 文字 处 理 软件 都 可 以 对 
CSS 进行 编辑 。 记 事 本 和 UltraEdit 等 最 常用 的 文本 编辑 工具 对 CSS 的 初学 者 都 很 有 帮助 。 

Dreamweaver 这 款 专业 的 网 页 设计 软件 在 代码 模式 下 对 HMTL、CSS 和 JavaScript 等 代 
码 有 着 非常 好 的 语法 着 色 以 及 语法 提示 功能 ， 对 CSS 的 学 习 很 有 帮助 。 

在 Dreamweaver 编辑 器 中 , 对 于 CSS 代码 , 在 默认 情况 下 都 采用 粉红 色 进 行 语 法 着 色 ， 
而 HTML 代码 中 的 标记 则 是 蓝 色 ， 正 文 内 容 在 默认 情况 下 为 黑色 。 而 且 对 于 每 行 代码 ， 前 
面 都 有 行 号 进行 标记 ， 方 便 对 代码 的 整体 规划 。 

无 论 是 CSS 代码 还 是 HTML 代码 ， 都 有 很 好 的 语法 提示 。 在 编写 具体 的 CSS 代码 时 ， 
按 回 车 键 或 空格 键 都 可 以 触发 语法 提示 。 例 如 ， 当 光标 移动 到 “color :#000000;” 一 句 的 末 
尾 时 ， 按 空格 键 或 者 回 车 键 ， 都 可 以 触发 语法 提示 功能 。 如 图 10-3 所 示 ，Dreamweaver 会 
列 出 所 有 可 以 供 选择 的 CSS 样式 属性 ， 方 便 设计 者 快速 进行 选择 ， 从 而 提高 工作 效率 。 

当 已 经 选 定 某 个 CSS 样式 ， 例 如 上 例 中 的 color 样式 ， 在 其 冒号 后 面 再 按 空 格 键 时 ， 
Dreamweaver 会 弹出 新 的 详细 提示 框 ， 让 用 户 对 相应 的 CSS 值 进行 直接 选择 ， 如 图 10-4 所 





















































示 调 色 板 就 是 其 中 的 一 种 情况 。 
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10-3 ”代码 提示 图 10-4 调 色 板 


10.1.4 CSS 的 基本 语法 
CSS 的 语法 结构 仅 由 3 部 分 组 成 ， 分 别 为 选择 符 、 样 式 属性 和 值 ， 基 本 语法 如 下 。 
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选择 符 { 样 式 属性 : 取 值 ， 样 式 属性 : 取 值 ; 样式 属性 : 取 值 ; … } 

语法 说 明 : 

@ ”选择 符 (selector) 指 这 组 样式 编码 所 要 针对 的 对 象 ， 可 以 是 一 个 XHTML 标签 ， 如 
<body><hl>; 也 可 以 是 定义 了 特定 id 或 class 的 标签 ， 如 #main 选择 符 表示 选择 
<div id=main>， 即 一 个 被 指定 了 id 为 “main” 的 对 象 。 浏览 器 将 对 CSS 选择 符 进 
行 严格 的 解析 ， 每 一 组 样式 均 会 被 浏览 器 应 用 到 对 应 的 对 象 上 。 

@ 属性 (property) 是 CSS 样式 控制 的 核心 ,对 于 每 一 个 XHTML 中 的 标签 ，CSS 都 提 
供 了 丰富 的 样式 属性 ， 如 颜色 、 大 小 、 定 位 和 浮动 方式 等 。 

@ 值 (value) 是 指 属性 的 值 ， 形 式 有 两 种 ， 一 种 是 指定 范围 的 值 ， 如 float 属性 ， 只 可 
以 有 left、right 和 none 3 种 值 ; 另 一 种 为 数值 ， 如 width 能 够 取 值 0 一 9999， 或 通 
过 其 他 数学 单位 来 指定 。 

在 实际 应 用 中 ， 往 往 使 用 以 下 类 似 的 应 用 形式 : 


body {background-color: blue} 


表示 选择 符 为 body， 即 选择 了 页 面 中 的 <body> 标 签 ， 属 性 为 background-color， 这 个 
属性 用 于 控制 对 象 的 背景 色 ， 而 值 为 blue。 页 面 中 的 body 对 象 的 背景 色 通过 使 用 这 组 CSS 
编码 ， 被 定义 为 蓝 色 。 


10.1.5 浏览 器 与 CSS 


浏览 器 各 式 各 样 ， 绝 大 多 数 浏览 器 对 CSS 都 有 很 好 的 支持 ， 因 此 设计 者 往往 不 用 担心 
其 设计 的 CSS 文件 不 被 用 户 所 支持 。 但 目前 主要 的 问题 在 于 , 各 个 浏览 器 之 间 对 CSS 很 多 
细节 的 处 理 存在 差异 ， 设 计 者 在 一 种 浏览 器 上 设计 的 CSS 效果 ， 在 其 他 浏览 器 上 的 显示 效 
果 很 可 能 不 一 样 。 就 目前 主流 的 浏览 器 正 与 Firefox 等 而 言 ， 在 某 些 细节 的 处 理 上 就 不 尽 
相同 。 对 下 本 身 而 言 ， 耻 6 与 发 布 不 久 的 正 7， 对 相同 页 面 的 浏览 效果 都 存在 一 些 差异 。 

使 用 CSS 制作 网 页 ， 一 个 基本 的 要 求 就 是 主流 的 浏览 器 之 间 的 显示 效果 要 基本 一 致 。 
通常 的 做 法 是 一 边 编写 HIML 和 CSS 代码 , 一 边 在 不 同 的 浏览 器 上 进行 预览 , 及 时 调整 各 
个 细节 ， 这 对 深入 掌握 CSS 也 是 很 有 好 处 的 。 

另外 Dreamweaver 的 视图 模式 只 能 作为 设计 时 的 参考 来 使 用 ， 绝 对 不 能 作为 最 终 显示 
效果 的 依据 ， 只 有 浏览 器 中 的 效果 才 是 大 家 所 看 到 的 。 


10.2 基本 CSS 选择 器 


选择 器 是 CSS 中 很 重要 的 概念 ， 所 有 HIML 语言 中 的 标签 都 是 通过 不 同 的 CSS 选择 
器 进行 控制 的 。 用 户 只 需要 通过 不 同 的 选择 器 对 HIML 标签 进行 控制 ， 并 赋予 各 种 样式 声 
明 ， 即 可 实现 各 种 效果 。 在 CSS 中 ， 有 各 种 不 同类 型 的 选择 器 ， 基 本 的 选择 器 有 标签 选择 
器 、class 选择 器 和 ID 选择 器 3 种 ， 下 面 详细 进行 介绍 。 
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10.2.1 标签 选择 器 


一 个 完整 的 HTML 页 面 是 由 很 多 不 同 的 标签 组 成 的 。 标 签 选择 器 是 直接 将 HTML 标 
签 作为 选择 器 ， 可 以 是 <p><h1><dl><strong> 等 HTML 标签 。 例 如 <P> 选 择 器 ， 下 面 就 是 用 
于 声明 页 面 中 所 有 <p> 标 签 的 样式 风格 。 

pt 

font-size:14px; 

color:#093; 

} 


以 上 这 段 代 码 声明 了 页 面 中 所 有 的 <p> 标 签 ， 文 字 大 小 均 是 14px， 颜 色 为 #093( 绿 色 )， 
这 在 后 期 维护 中 ， 如 果 想 改变 整个 网 站 中 <p> 标 签 文字 的 颜色 ， 只 需要 修改 color 属性 就 可 
以 了 ， 就 这 么 容易 ! 
每 一 个 CSS 选择 器 都 包含 了 选择 器 本 身 、 属 性 和 值 ， 其 中 属性 和 值 可 以 设置 多 个 ， 从 
而 实现 对 同一 个 标签 声明 多 种 样式 风格 ， 如 图 10-5 所 示 。 
声明 声明 


color: 093 ; font-size: 14 px: 


jm ey 


属性 人 午 属性 值 
图 10-5 CSS 标签 选择 器 
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10.2.2 class 选择 器 


标签 选择 器 一 旦 声明 , 则 页 面 中 所 有 的 该 标签 都 会 相应 地 产生 变化 , 如 声明 了 <p> 标 签 
为 红色 时 , 则 页 面 中 所 有 的 <p> 标 签 都 将 显示 为 红色 ,如果 希望 其 中 的 某 一 个 标签 不 是 红色 ， 
而 是 蓝 色 , 则 仅 依靠 标签 选择 器 是 远 远 不 够 的 , 所 以 还 需要 引入 类 (class) 选 择 器 。 定义 class 
选择 器 时 ， 在 自 定义 类 的 名 称 前 面 要 加 一 个 “.” 号 。 

class 选择 器 的 名 称 可 以 由 用 户 自 定 义 ， 属 性 和 值 跟 标签 选择 器 一 样 ， 也 必须 符合 CSS 
规范 ， 如 图 10-6 所 示 。 












































class 名 称 声明 声明 
ed 
lask { | color: green; font-size: 20px; } 
class 先 择 器 Pa 二 


图 10-6 ”CSS 类 别 选择 器 
例如 ， 当 页 面 同时 出 现 3 个 <p> 标 签 时 ， 如 果 想 让 它们 的 颜色 各 不 相同 ， 就 可 以 通过 设 
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置 不 同 的 class 选择 器 来 实现 。 一 个 完整 的 案例 如 下 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>class 选择 器 </title> 

<style type="text/css"> 

.red{ color:red; font-size:110px;} 








.green{ color:green; font-size:20px;} 
</style> 

</head> 

<body> 

<p class="red"> 选 择 器 1</p> 

<p class="green"> 选 择 器 2</p> 

<h3 class="green"> 同 样 适用 </h3> 
</body> 

</html> 


其 显示 效果 如 图 10-7 所 示 。 从 图 中 可 以 看 到 两 个 <p> 标 签 分 别 呈现 出 了 不 同 的 颜色 和 
字体 大 小 ， 而 且 任何 一 个 class 选择 器 都 适用 于 所 有 HTML 标签 ， 只 需要 用 HTML 标签 的 


class 属性 声明 即 可 ， 例 如 <h3> 标 签 同样 适用 于 .green 这 个 类 别 。 


=] 
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同样 适用 
R100% 








图 10-7 class 选择 器 实例 
仔细 观察 图 10-7 还 会 发 现 ， 最 后 一 行 <h3> 标 签 显示 效果 为 粗 体 字 ， 这 是 因 











为 在 没有 


定义 字体 的 粗细 属性 的 情况 下 ， 浏 览 器 采用 默认 的 显示 方式 ，<p> 默 认为 正常 粗细 ，<h3> 


默认 为 粗 字 体 。 
10.2.3 ID 选择 器 


ID 选择 器 的 使 用 方法 跟 class 选择 器 基本 相同 , 不 同 之 处 在 于 ID 选择 器 只 能 在 HTML 
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页 面 中 使 用 一 次 ， 
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因此 其 针对 性 更 强 。 在 HTML 的 标签 中 只 需要 利用 ID 属性 ， 就 可 以 直 







































































接 调 用 CSS 中 的 DD 选择 器 ， 其 格式 如 图 10-18 所 示 。 
声明 声明 
#id ll 
{ | color:yellow:; font-size: 30px; } 
了 DD 选择 器 属性 和 值 属性 值 
10-8 ID 选择 器 
实例 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ID 选择 器 </title> 
<style type="text/css"> 
<!-- 
#onef{ 
font-weight:bold; /* 粗 体 */ 
} 
#two{ 
font-size:30px; /* 字体 大 小 */ 
color: #A700A6; /* 颜色 */ 
} 
-—> 
</style> 
</head> 
<body> 
<p id="one">ID 选择 器 1</p> 
<p id="two">ID 选择 器 2</p> 
<p id="two">ID 选择 器 3</p> 
<p id="one two">ID 选择 器 3</p> 
</body> 
</html> 
显示 效果 如 图 10-9 所 示 , 第 2 行 与 第 3 行 显示 相同 的 CSS 方案 。 可 以 看 出 , 在 很 多 浏 
览 器 中 , ID 选择 器 可 以 用 于 多 个 标签 , 即 每 个 标签 定义 的 id 不 只 是 CSS 可 调用 , JavaScript 
等 其 他 脚本 语言 同样 也 可 以 调用 ， 因 为 这 个 特性 ， 所 以 不 要 将 ID 选择 器 用 于 多 个 标签 ， 否 




















则 会 出 现 意 想不到 的 错误 。 如 果 一 个 HTML 中 有 两 个 相同 的 id 标签 ， 那 么 将 会 导致 
JavaScript 在 查找 id 时 出 错 ， 例 如 函数 getElementById()。 
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EN P -< 全 Diass 
文件 (F) 。” 编 回 (E) 。 坦 看 (V) ”收藏 夫 (A) ”工具 (D 帮助 (H) 
了 DD 选择 器 1 

ID 选择 器 2 

ID 选择 器 3 


了 选择 器 3 














图 10-9 ID 选择 器 实例 


正 因为 JavaScript 等 脚本 语言 也 能 调用 HTML 中 设置 的 id, 所 以 ID 选择 器 一 直 被 广泛 
地 使 用 。 网 站 设计 者 在 编写 CSS 代码 时 ， 应 养 成 良好 的 编写 习惯 , 一 个 id 最 多 只 能 赋予 一 
个 HIML 标签 。 

另外 从 图 10-9 可 以 看 到 ， 最 后 一 行 没 有 任何 CSS 样式 风格 显示 ， 这 意味 着 ID 选择 器 
不 支持 像 class 选择 器 那样 的 多 风格 同时 使 用 ， 类 似 id="one two" 这 样 的 写法 是 完全 错误 的 
语法 。 


10.3 在 HTML 中 使 用 CSS 


在 HIML 网 页 中 添加 CSS 有 4 种 方法 : 链接 方式 、 行 内 方式 、 导 入 方式 和 内 顽 方 式 ， 
下 面 分 别 介绍 。 


10.3.1 ”链接 外 部 样式 表 


链接 方式 就 是 在 网 页 中 调用 已 经 定义 好 的 样式 表 来 实现 样式 表 的 应 用 ， 它 是 一 个 单独 
的 文件 ， 然 后 在 页 面 中 用 <link> 标 签 链接 到 这 个 样式 表 文 件 ， 这 个 <link> 标 签 必须 放 到 页 面 
的 <head> 标 签 内 。 这 种 方法 最 适合 大 型 网 站 的 CSS 样式 定义 。 














基本 语法 : 

<link type="text/css" rel="stylesheet" href=" 外 部 样式 表 的 文件 名 称 "> 

语法 说 明 : 

(1) 链接 外 部 样式 表 时 ， 不 需要 使 用 style 元 素 ， 只 需 直 接 用 <link> 标 签 放 在 <head> 标 
签 中 就 可 以 了 。 


(2) 同样 ， 外 部 样式 表 的 文件 名 称 是 要 嵌入 的 样式 表 文 件 名 称 ， 后 组 为 .css。 
(3) CSS 文件 一 定 是 纯 文 本 格式 。 

(4) 在 修改 外 部 样式 表 时 ， 引 用 它 的 所 有 外 部 页 面 也 会 自动 更 新 。 

(5) 外 部 样式 表 中 的 URL 为 相对 于 样式 表 文 件 在 服务 器 上 的 位 置 。 
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(9) 外 部 样式 表 优 先 级 低 于 内 部 样式 表 。 

(7) 可 以 同时 链接 几 个 样式 表 ， 靠 后 的 样式 表 优 先 于 靠 前 的 样式 表 。 

一 个 外 联 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 当 改变 这 个 样式 表 文 件 时 ， 所 有 应 用 该 样 
式 的 页 面 都 随 之 改变 。 在 制作 大 量 相同 样式 页 面 的 网 站 时 ， 外 联 样式 表 非 常 有 用 ， 不 仅 减 
少 了 重复 的 工作 量 ， 而 且 有 利于 以 后 的 修改 、 编 辑 ， 浏 览 时 也 减少 了 重复 下 载 代码 。 


10.3.2 行内 方式 


行内 方式 是 混合 在 HTML 标签 里 使 用 的 ， 用 这 种 方法 ， 可 以 对 某 个 元 素 很 简单 地 单独 
定义 样式 。 行 内 方式 的 使 用 是 直接 在 HTML 标签 里 添加 style 参数 ， 而 style 参数 的 内 容 就 
是 CSS 的 属性 和 值 ， 在 style 参数 后 面 引 号 里 的 内 容 相当 于 在 样式 表 大 括号 里 的 内 容 。 

基本 语法 : 

< 标签 style=" 样 式 属性 : 属性 值 :样式 属性 : 属性 值 ……"> 

语法 说 明 : 

(1) 标签 : HTML 标签 ， 如 <body><table><p> 等 。 

(2) 标签 的 style 定义 只 能 影响 标签 本 身 。 

(3) style 的 多 个 属性 之 间 用 分 号 分 隔 。 

(4) 标签 本 身 定义 的 style 优先 于 其 他 所 有 样式 定义 。 

虽然 这 种 方法 使 用 比较 简单 ， 显 示 直 观 ， 但 在 制作 页 面 的 时 候 需 要 为 很 多 的 标签 设置 
style 属性 ， 所 以 会 导致 HTML 页 面 不 够 纯净 ,文件 体积 过 大 ， 不 利于 搜索 蜂 蛛 仆 行 ， 从 而 
导致 后 期 维护 成 本 高 。 


10.3.3 ” 赃 入 外 部 样式 表 


嵌入 外 部 样式 表 就 是 在 HTML 代码 的 主体 中 直接 导入 样式 表 的 方法 。 
基本 语法 : 

<style type=text/css> 

@import url ("外 部 样式 表 的 文件 名 称 ") ; 

</style> 

语法 说 明 : 

(1) import 语句 后 的 “;” 一 定 要 加 上 ! 

(2) 外 部 样式 表 的 文件 名 称 是 要 嵌入 的 样式 表 文 件 名 称 ， 后 组 为 .css。 
(3) @import 应 该 放 在 style 元 素 的 任何 其 他 样式 规则 前 面 。 


10.3.4 定义 内 部 样式 表 


内 部 样式 表 人 允许 在 它们 所 应 用 的 HTML 文档 的 顶部 设置 样式 ， 然 后 在 整个 HTML 文 
件 中 直接 调用 使 用 该 样式 的 标签 。 
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基本 语法 : 


<style type="text/css"> 

b== 

选择 符 1 (样式 属性 : 属性 值 ;样式 属性 : 属性 值 ; .…) 
选择 符 2 (样式 属性 : 属性 值 ;样式 属性 :属性 值 ;.…) 
选择 符 3 (样式 属性 ， 属 性 值 ;样式 属性 : 属性 值 ; .…) 





选择 符 n (样式 属性 ， 属 性 值 ;样式 属性 ， 属 性 值 ;.) 


--> 


语法 说 明 : 
(1) ” <style> 标签 是 用 来 说 明 所 要 定义 的 样式 ，type 属性 是 指 style 标签 以 CSS 的 语法 
定义 。 


(2) <!-- -> 隐藏 标签 ， 避免 了 因 浏 览 器 不 支持 CSS 而 导致 错误 ， 加 上 这 些 标签 后 ,不 
支持 CSS 的 浏览 器 ， 会 自动 跳 过 此 段 内 容 ， 避 免 一 些 错误 。 

(3) 选择 符 1… 选 择 符 m 选择 符 可 以 使 用 HIML 标签 的 名 称 ， 所 有 的 HTML 标签 都 
可 以 作为 选择 符 。 

(4) 样式 属性 主要 是 显示 选择 符 格式 化 风格 的 。 

(5) 属性 值 设 置 对 应 属性 的 值 。 


本 章 小 结 


CSS 是 为 了 简化 Web 页 面 的 更 新 工作 而 诞生 的 ， 它 使 网 页 变 得 更 加 美观 ， 维 护 更 加 方 
便 。CSS 在 网 页 制作 中 起 着 非常 重要 的 作用 ， 对 于 控制 网 页 中 对 象 的 属性 、 增 加 页 面 中 内 
容 的 样式 、 精 确 地 布局 定位 等 都 发 挥 了 非常 重要 的 作用 ， 是 网 页 设计 师 必须 熟练 掌握 的 内 
容 之 一 。 网 页 的 设计 与 布局 好 与 不 好 ，CSS 的 学 习 很 重要 ， 深 信 自己 坚持 每 天 多 学 一 点 ， 
可 以 学 好 CSS。 本 章 主 要 介绍 了 为 什么 在 网 页 中 加 入 CSS、 基 本 的 CSS 选择 器 、 在 HTML 
中 使 用 CSS、 设 置 CSS 属性 等 CSS 基础 知识 。 


练 习 题 
1. 填空 题 
(1) 是 CSS 样式 控制 的 核心 ， 对 于 每 一 个 XHTML 中 的 标签 ，CSS 都 提供 


了 丰富 的 样式 属性 ， 如 颜色 、 大 小 、 定 位 和 浮动 方式 等 。 
(2) 选择 器 (selector) 是 CSS 中 很 重要 的 概念 , 所 有 HTML 语言 中 的 标签 都 是 通过 不 同 
的 CSS 选 择 器 进行 控制 的 .在 CSS 中 ,有 各 种 不 同类 型 的 选择 器 ,基本 选择 器 有 
和 3 种。 
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2. 操作 题 


给 网 页 添加 CSS, 使 用 CSS 设置 文本 字体 为 宋体 、 文 本 颜色 为 黑色 ,文字 大 小 为 12px， 
如 图 10-10 所 示 。 





10-10 ”给 网 页 添加 CSS 
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第 11 章 用 CSS 设计 丰富 的 文字 效果 


【学 习 目标 】 

浏览 网 页 时 ， 获 取信 息 最 直接 、 最 直观 的 方式 就 是 通过 文本 。 文 本 是 基本 的 信息 载体 ， 
不 管 网 页 内 容 如 何 丰富 ， 文 本 自始至终 都 是 网 页 中 最 基本 的 元 素 ， 因 此 掌握 好 文本 和 段落 
的 使 用 ， 对 于 网 页 制作 来 说 是 最 基本 的 要 求 。 在 网 页 中 添加 文字 并 不 难 ， 可 主要 问题 是 如 
何 编排 这 些 文字 以 及 控制 这 些 文字 的 显示 方式 ， 让 文字 看 上 去 编排 有 序 、 整 齐 美 观 。 本 章 
主要 讲述 使 用 CSS 设计 丰富 的 文字 特效 ， 以 及 使 用 CSS 排版 文本 。 

本 章 主要 内 容 包 括 : 

(1) 设计 网 页 中 的 文字 样式 ; 

(2) 设计 文本 的 段落 样式 ; 

(3) CSS 滤 镜 设计 特效 文字 。 


11.1 设计 网 页 中 的 文字 样式 


使 用 CSS 样式 表 可 以 定义 丰富 多 彩 的 文字 格式 。 文 字 的 属性 主要 有 字体 、 字 号 、 加 粗 
与 斜体 等 。 如 图 11-1 所 示 的 网 页 中 应 用 了 多 种 样式 的 文字 ， 在 颜色 、 大 小 以 及 形式 上 富 于 
变化 ， 但 同时 也 保持 了 页 面 的 整洁 与 美观 ， 给 人 以 美的 享受 。 


Mayflower Zie- A icy ON EE 


PAEALE | RB IPA Porter 


India Pale Ale 


IPA 


INDIA PALE ALE 





11-1 采用 CSS 定义 网 页 文字 


11.1.1 字体 


font-family 属性 用 来 定义 相关 元 素 使 月 


第 11 章 用 CSSs 设计 主语 的 文字 效果 





基本 语法 : 
font-family: "字体 1", "字体 2"，… 


语法 说 明 : 


目的 字体 。 


font-family 属性 中 指定 的 字体 要 受到 用 户 环境 的 影响 。 打 开 网 页 时 ， 浏 览 器 会 先 从 用 


户 计算 机 叶 





寻找 font-family 中 的 第 一 个 字体 ， 如 果 计 算 机 中 没有 这 个 字体 ， 会 向 右 继续 寻 


找 第 二 个 字体 ， 依 次 类 推 。 如 果 浏 览 页 面 的 用 户 在 浏览 环境 中 没有 设置 相关 的 字体 ， 则 定 


义 的 字体 将 失去 作用 。 


下 面 通过 实例 讲述 font-family 属性 的 使 用 ， 了 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
i 
.font { 
font-family: 宋体 ; 
} 
二 > 
</style> 
</head> 
<body> 
<div class="font"> 
<ul> 
<1i> 设 置 字体 </1i> 
</ul> 
</div> 
</body> 
</html> 


使 用 





这 是 “font-family: 宋体 ”， 在 浏 


注意 ， 在 实际 应 用 中 ， 由 于 大 部 分 中 文 操作 系统 的 计算 机 中 并 没有 安装 很 多 字体 ， 因 
此 建议 在 设置 中 文字 体 属性 时 ， 不 要 选择 特殊 字体 ， 应 选择 宋体 或 黑体 。 否 则 当 浏 览 者 的 
计算 机 中 没有 安装 该 字体 时 ， 显 示 会 不 正常 ， 如 果 需 要 安装 装饰 性 的 字体 ， 可 以 使 用 


来 代替 纯 文本 的 显示 。 





其 代码 如 下 所 示 。 


览 器 中 浏览 效果 如 图 11-2 所 示 。 








医 
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11-2 font-family 定义 字体 


11.1.2 ”字号 


font-size 属性 用 来 定义 字体 的 大 小 。 

基本 语法 : 

font-size: 大 小 的 取 值 ; 

font-size 属性 的 值 可 以 有 多 种 指定 方式 ， 绝 对 尺寸 、 相 对 尺寸 、 长 度 、 百 分 比值 都 可 
以 用 来 定义 。 

实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 














<style type="text/css"> 
Ee 
tont { 

font-family: Arial, Helvetica, sans-serif; 
font-size: 60pt; 
} 
二 > 
</style> 
<title> 无 标题 文档 </title> 
</head> 
<body class="font"> 
设置 字号 大 小 
</body> 
</html> 


上 面 的 实例 代码 使 用 font-size: 60pt 设置 字号 为 60pt， 在 浏览 器 中 浏览 文字 效果 如 
图 11-3 所 示 。 


陶 182 








第 11 章 用 CSs 设计 主语 胸 文 字 效 果 








EE Oo| G zee Ao 
* 帮 号 呈 i 
设置 字号 大 小 
| 
所 100% | 





11-3 ”设置 字号 后 的 效果 


11.1.3 ”加 粗 


在 CSS 中 利用 font-weight 属性 来 设置 字体 的 粗细 。 

基本 语法 : 

font-weight :字体 粗细 值 ; 

语法 说 明 : 

font-weight 的 取 值 范围 包括 normal、bold、bolder、lighter、number。 其 中 normal 表示 
正常 粗细 ; bold 表示 粗 体 ，bolder 表示 特 粗 体 ，lighter 表示 特 细 体 ，number 不 是 真正 的 取 
值 ， 其 范围 是 110 一 1100， 一 般 情 况 下 都 取 整 百 的 数字 ， 如 200、300 等 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<style type="text/css"> 

P.normal {font-weight: normal} 

P.thick {font-weight: bold} 

P.thicker {font-weight: 900} 

</style> 

</head> 

<body> 

<p class="normal"> 设 置 字体 粗细 </p> 

<P class="thick"><span class="normal"> 设 置 字 体 粗细 </span></p> 
<p class="thicker"><span class="normal"> 设 置 字体 粗细 </span></p> 
</body> 

</html> 
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这 里 使 用 font-weight 设置 了 字体 的 不 同 粗细 效果 ， 如 图 11-4 所 示 。 
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11-4 设置 字体 粗细 


11.1.4 样式 


font-style 属性 用 来 设置 字体 是 否 为 斜体 。 

基本 语法 : 

font-style: 样 式 的 取 值 ; 

语法 说 明 : 

font-style 属性 定义 字体 的 风格 。 该 属性 设置 使 用 斜体 、 倾 斜 或 正常 字体 。 斜 体 字体 通 
常 被 定义 为 字体 系列 中 的 一 个 单独 的 字体 。 理 论 上 ， 用 户 便 可 以 根据 正常 字体 计算 一 个 斜 
体 字体 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 





<style type="text/css"> 

Rh 

sFont f 
font-family: Arial, Helvetica, sans-serif;font-size: 24pt; 
font-style: italic; font-weight: bold; 
} 

= 区 

</style> 

<title> 无 标题 文档 </title> 

</head> 

<body class="font"> 

设置 字体 样式 

</body> 

</html> 
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加 粗 的 代码 表示 使 
所 示 。 


11.1.5” 变 体 属性 











j font-style: italic 设置 字体 为 斜体 ， 在 浏览 器 中 浏览 效果 如 
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11-5 设置 字体 样式 








图 11-5 








使 用 font-variant 属性 可 以 将 小 写 的 英文 字母 转变 为 大 写 ， 而 且 在 大 写 的 同时 ， 能 够 让 


字母 大 小 保持 与 小 写 时 - 


基本 语法 ; 


一 样 的 尺寸 高 度 。 


font-variant: 变 体 属性 值 ; 


语法 说 明 : 


font-variant 属性 值 见 表 11-1。 


属性 值 


表 11-1 font-variant 属性 


描 述 





normal 


正常 值 





small-caps 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


将 小 写 英文 字体 转换 为 大 写 英文 字体 





<meta charset="utf-8"> 


<style type="text/css"> 


< OnE 


font-family: 


Arial, Helvetica, sans-serif; 


font-size: 50pt;font-style: italic;font-weight: bold; 


font-variant: small-caps; 


}-——> 
</style> 
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<title> 无 标题 文档 </title> 
</head> 

<body class="font"> 
dreamweaver 

</body> 

</html> 


使 用 font-variant: small-caps 设置 英文 字母 全 部 大 写 ， 而 且 在 大 写 的 同时 ， 能 够 让 字母 
大 小 保持 与 小 写 时 一 样 的 尺寸 高 度 。 在 浏览 器 中 浏览 效果 如 图 11-6 所 示 。 

















DREAMWEAVER 





图 11-6 将 小 写 英文 字体 转变 为 大 写 英 文字 体 


11.1.6 ”文字 修饰 
使 用 text-decoration 属性 可 以 对 文本 进行 修饰 ， 如 设置 下 划 线 、 删 除 线 等 。 
基本 语法 : 
text-decoration: 取 值 ; 


语法 说 明 : 
text-decoration 属性 值 见 表 11-2。 


表 11-2 text-decoration 属性 

















属性 值 描 述 

none 默认 值 
underline 对 文字 添加 下 划 线 
overline 对 文字 添加 上 划 线 
line-through 对 文字 添加 删除 线 
blink 闪烁 文字 效果 

实例 代码 : 

<style type="text/css"> 

二 


D> ,as 
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Font 
font-family: Arial, Helvetica, sans-serif; 
font-size: 24pt;font-style: italic;font-weight: bold; font-variant: 
small-caps; 
text-decoration: underline; 
} 
--> 
</style> 


加 粗 代码 text-decoration: underline 表示 设置 文字 带 有 下 划 线 ， 在 浏览 器 中 浏览 效果 如 
图 11-7 所 示 。 


DREAMWEAVER 





11-7 设置 下 划 线 效果 


11.2 ”设计 文本 的 段落 样式 


文本 的 段落 样式 定义 整 段 的 文本 特性 。 在 CSS 中 ， 主 要 包括 单词 间距 、 字 母 间 距 、 垂 
直 对 齐 、 文 本 对 齐 、 文 字 缩 进 和 行 高 等 。 
11.2.1 行 高 

line-height 属性 可 以 设置 对 象 的 行 高 ， 行 高 值 可 以 为 长 度 、 倍 数 和 百分比 。 

基本 语法 : 

line-height: 行 高 值 ; 

语法 说 明 : 

该 属性 会 影响 行 框 的 布局 。 在 应 用 到 一 个 块 级 元 素 时 ， 它 定义 了 该 元 素 中 基线 之 间 的 
最 小 距离 而 不 是 最 大 距离 。 

















[对 提示 : line-height 与 font-size 的 计算 值 之 差 (在 CSS 中 成 为 “ 行 间距 ”) 分 为 两 半 ， 分 
别 加 到 一 个 文本 行内 容 的 顶部 和 底部 。 可 以 包含 这 些 内容 的 最 小 框 就 是 行 框 。 


187 二 





HTML+DIV+CSS 网 页 设计 与 布局 买 用 教程 





实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<style type="text/css"> 

P.small {line-height: 100%} 

P.big {line-height: 200%} 

</style> 

</head> 

<body> 

<p class="small"> 

这 个 段落 拥有 更 小 的 行 高 。 这 个 段落 拥有 更 小 的 行 高 。 这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。 这 个 段落 拥有 更 小 的 行 高 。 这 个 段落 拥有 更 小 的 行 高 。 

这 个 段落 拥有 更 小 的 行 高 。</p> 

<p class="big"> 
这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高 。 
这 个 段落 拥有 更 大 的 行 高 。 

</p> 

</body> 

</html> 


本 实例 前 几 行 使 用 line-height: 100% 设 置 行 高 为 正常 行 高 ,后 几 行 使 用 line-height: 200% 


设置 行 高 为 正常 行 高 的 2 倍 ， 在 浏览 器 中 浏览 效果 如 图 11-8 所 示 。 





© MENT po- ¢ Guxts x | 
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这 个 段落 拥 有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高。 
这 个 段落 拥有 更 大 的 行 高 。 这 个 段落 拥有 更 大 的 行 高。 
这 个 段落 拥有 更 大 的 行 高 
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图 11-8 设置 行 高 效果 


11.2.2 ”对 齐 
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text-align 用 于 设置 文本 的 水 平 对 齐 方 式 。 
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基本 语法 : 

text-align: 排 列 值 ; 

语法 说 明 : 

水 平 对 齐 方式 取 值 包括 left、right、center 和 justify， 共 4 种 对 齐 方式 。 
left， 左 对 齐 。 

right 右 对 齐 。 

center: 居中 对 齐 。 

justify: 两 端 对 齐 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
hl {text-align: center} 
h2 {text-align: left} 
h3 {text-align: right} 
</style> 

</head> 

<body> 

<h1> 标 题 1 (居中 对 齐 ) </h1> 
<h2> 标 题 2 ( 左 对 齐 ) </h2> 
<h3> 标 题 3 ( 右 对 齐 ) </h3> 
</body> 

</html> 


本 实例 运用 text-align 设置 标题 居中 对 齐 、 左 对 齐 和 右 对 齐 ， 在 浏览 器 中 浏览 效果 如 
图 11-9 所 示 。 
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11-9 设置 对 齐 方式 效果 
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11.2.3” 缩 进 


在 HIML 中 只 能 控制 段落 的 整体 向 右 缩 进 , 如 果 不 进行 设置 , 浏览 器 则 默认 为 不 缩 进 ， 


而 在 CSS 中 可 以 控制 段落 的 首 行 缩 进 以 及 缩 进 的 距离 。 


基本 语法 : 

text-indent : 缩 进 值 ; 

语法 说 明 : 

文本 的 缩 进 值 必须 是 长 度 值 或 百分比 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<style type="text/css"> 

p {text-indent: lcm} 

</style> 

</head> 

<body> 

<p> 

生命 的 奖赏 远 在 旅途 的 终点 ， 而 非 起 点 附近 。 我 不 知道 要 走 多 少 步 才能 达到 目标 ， 迈 出 一 千 步 时 ， 
仍然 可 能 遭 到 失败 。 但 成 功 就 藏 在 拐角 的 后 面 ， 除 非 拐 了 弯 ， 我 永远 不 知道 有 多 远 。 再 前 进一步， 
如 果 没有 用 ， 再 向 前 一 步 ， 事 实 上 ， 每 次 前 进 一 点 点 并 不 难 。</p> 





</body> 
</html> 
本 实例 运用 text-indent 设置 段落 首 行 缩 进 为 lem, 在 浏览 器 中 浏览 效果 如 图 11-10 所 示 。 


二 加 2》 凌 
司 EEESNIEEREEETT PC 全 无 fx 
文件 (月 篇 纺 ( 日 ” 豆 看 V) 收藏 夫 (A) 工具 (T 者 助 HH) 
_ .生命 的 奖赏 远 在 旅途 的 终点 ， 而 非 起 点 附近 。 我 不 知道 要 走 多 少 步 才能 达到 目 
标 ， 迈 出 一 十 步 时 ， 仍 然 可 塌 遭 到 失败 。 包 成 功 就 藏 在 扬 角 的 后 面 ， 除 非 挡 了 弯 ， 我 水 
Ta a ts hi ne aon teh 








护 100% ~ 
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第 11 章 用 CSS 设计 主语 的 文字 效果 


11.2.4 ”单词 间距 


word-spacing 可 以 设置 英文 单词 之 间 的 距离 。 

基本 语法 : 

word-spacing: 取 值 ; 

语法 说 明 : 

可 以 使 用 normal， 也 可 以 使 用 长 度 值 。normal 指正 常 的 间隔 ， 是 默认 选项 ， 长 度 值 是 
设置 单词 间隔 的 数值 及 单位 ， 可 以 使 用 负 值 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 
<style type="text/css"> 








p.spread {word-spacing: 30px;} 

P.tight {word-spacing: -0.5em;} 

</style> 

</head> 

<body> 

<p class="spread">Good morning everyone</p> 
<p class="tight">Good morning everyone</p> 
</body> 

</html> 


本 实例 运用 word-spacing 设置 单词 之 间 的 距离 ， 第 1 行 间距 设置 为 30px， 第 2 行 间距 
设置 为 -0.5em， 在 浏览 器 中 浏览 效果 如 图 11-11 所 示 。 











一 口 X 
© EEE P- < | G taxes 
文件 (站 ”篇 辑 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
Good moming everyone 
Goodmorningeveryone 
或 100% > 
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11.2.5 ” 首 字 下 沉 


一 些 网 站 的 一 段 文字 开头 的 字母 都 很 大 ， 看 上 去 挺 特 别 ， 这 叫 首 字 下 沉 效果 ， 用 CSS 
的 first-letter 可 以 实现 相似 的 功能 。 
基本 语法 : 


first-letter 


语法 说 明 : 
first-letter 选择 器 用 来 指定 元 素 第 一 个 字母 的 样式 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style> 

Pp:first-letter 
{font-size:200%;color: #B5080B;} 
</style> 

</head> 

<body> 

<p>Hello, everyone</p> 
</body> 

</html> 


本 实例 应 用 first-letter 设置 <p> 标 签 里 的 文字 的 首 字母 ， 并 为 其 设置 样式 。 如 图 11-12 
所 示 是 网 页 应 用 首 字 下 沉 后 的 效果 。 























ed 口 x 
© ENE P+ ¢ 全 无 5Extk 
文件 (站 妨 强 (E) 查看 (V) 收藏 天 (A) 工具 (帮助 (H) 
Heto.everyone 
所 100% ~ 
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11.2.6 ”大 小 写 转换 
text-transform 用 来 转换 英文 字母 的 大 小 写 。 


BD 10» 








第 11 章 用 CSS 设计 和 主语 的 文字 效果 


基本 语法 : 

text-transform: 转 换 值 

语法 说 明 : 

text-transform 包括 以 下 取 值 : 

none: 表示 使 用 原始 值 ; 

lowercase: 表示 使 每 个 单词 的 第 一 个 字母 大 写 ; 
uppercase: 表示 使 每 个 单词 的 所 有 字母 大 写 ; 
capitalize: 表示 使 每 个 字 的 所 有 字母 小 写 。 
实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


<style type="text/css"> 
p{text-transform: uppercase} 








</style> 
</head> 
<body> 
<p>Good evening</p> 
</body> 
</html> 
本 实例 应 用 text-transform 设置 每 个 字母 都 转换 为 大 写 ， 如 图 11-13 所 示 。 
- 0O x 
自 Pr 上 | EA 
文件 中。 区 疆 (9) ”查看 (V) 收藏 交 (A) 工具 (帮助 (H) 
GOOD EVENING 
看 100% ”> 











图 11-13 转换 为 大 写字 母 的 效果 


11.3 ”综合 实例 一 一 用 CSS 排版 网 页 文字 


文本 的 控制 与 布局 在 网 页 设计 中 占 了 很 大 比例 ， 也 可 以 说 文本 与 段落 是 最 重要 的 组 成 
部 分 。 下 面 通过 实例 讲述 利用 CSS 排版 网 页 文字 。 
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(1) 启动 Dreamweaver CC， 打 开 网 页 文档 ， 如 图 11-14 所 示 。 











antanl_x 攻 TON TGSIN 
区 二 于 加 
到 


\ 为 老人 控 起 一 把 保护 证 ! 


a 中 i 


» 吝 


i 村 多 针 普 误 办 了 芍 去 院 ， 城 市 念 关 也 有 共 办 过 才 计 的 ， 各 专 庄 的 由 关 对 外 主要 是 五 休 志 人 ， 有 条 件 的 栈 才 院 ; 

生机 老人 大 有 是 、 和 0 际 有 由 的 到 和 二 地 区 下 全 委 的 了 区 沫 谋 要 必 符 休 作对 条 和 防 Et 
盐 的 原则 ， 入 了 老人 的 生活 爱 、 王 疗 鼻 赤 宇 旨 竺 的 供 合 ， 艾 由 第 休 闻 相 ， 统 等 钦 

演 轩 地 区 的 驯 者 院 ， 人 全 生生 了” 入 二 扣 io 详 和 人 
小 周 经 宙 组 织 专人 参加 一 些 力所能及 的 生产 劳动 和 话 诗 冯 作 特点 的 广汉 体育 省 动 。 有 的 乡镇 把 避 院 办 开放 年 和 的 活动 中 心 ， 为 多 、 











以 笋 老 寿 村 站 者 院 为 例 ] 
ed 


人 入住 老 人 自 区 入 院 。 如 昌 院 出 由 本 人 及 家 后 提 出 店 请， 子女 及 全 家 人 同 哥 方 可 出 院 , 
入 往 考 人 及 取 届 中 沪 人 员 六 身价 证 更 印 计 一 总 、 者 人 己 肝 化 答 意 ， 并 于 并 无 二 神 岳 、 传 从 条 。 由 者 人 时 护 人 员 与 院 方 生 中 请 表 一 价 、 协 


下 两 愉 。 
有 精神 柄 、 传 引信 的 避 吉 下 再 入住 。 
院 方 榨 殿 被 杏 、 床单 、 状 读 ， 入 住 老 人 需 各 带 棉 被 . 裤 心 、 院 芷 、 毛巾、 水 定 、 香 高 等 日 用 有 及 四 季 换 洗 太 且 。 其 他 多 作物 品 ， 请 不 要 


从 下 和 让 和 作 才 隐 各 要。 风光 作 扩 各 特 开 ] 由 家 性 多 - 
和 了 帮 人 要 信用 号 呆 D 有 和 相信， 客人 及 友和 有 有 增 项 服 务 ， 与 了 六 





boy © Ci .sm 
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(2) 切换 到 拆 分 视图 ， 在 文字 的 前 面 输入 以 下 代码 ， 设 置 文字 的 字体 、 


如 图 11-15 所 示 。 


题 ， 
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<font color="#FC2729" face=" 新 宋体 " size="3"> 

















| 加 为 老人 撑 起 一 把 保护 证 ! 
a 和 as an， mar ee ， 





E 二 二 全 






中 国 农村 匀 亿 阁 谢 办 了 小 老 院 ， 本 和 ee 有 条 件 的 入 儿 院 还 入 收 吝 竖 汇 休 名 符 询 [ 

1 py 出 院 自 由 的 砷 则 。 许 条 地 区 证 为 优抚 对 象 的 孤 者 兴办 光 和 医院， 吸收 符 辣 条 件 的 对 象 入 院 ， 敏 者 院 般 韶华 体 事业 入 
人 的 生 档 绽 、 医 疗 加 表 误 襄 等 的 供给 ， 均 由 集体 藉 担 ， 撤 潜 [ot 

和 集 人 组 织 供给 有 国共 的 ， 由 国家 给 予 补 动 。 缴 老 企 的 守 睛 是 惑 老 养老 ， Ce 

ee 有 的 乡镇 拭 流 狠 院 办 下 吉 年 人 的 活动 中 心 ， 为 乡 、 


| 为 例 》 
“不 同 的 防老 院 入 任 条件 个 完全 相同 ， 以 下 仅 供 枯 老 。 
信 耽 和 0 与 要 求 ， 





© sw 





图 11-15 输入 代码 
(3) 在 文字 的 最 后 面 输 入 </font>， 如 图 11-16 所 示 。 








(4) 在 第 一 段 文 字 “ 中 国 养老 ”的 前 面 输入 代码 <h1>， 后面 输入 </hl>， 





如 图 11-17 所 示 。 




















大 小 、 颜 色 ， 


设置 文本 的 标 


(5) 在 段落 文字 前 面 的 <p> 中 输入 以 下 的 代码 , 设置 文本 的 段落 行 高 , 如 图 11-18 所 示 。 





<p style="line-height:150%"> 
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rw 








图 11-16 输入 代码 








万 和 大 理 耻 一 到 保护 下 















多 元 扩 了 人 
的 生产 芝 动 村 从 各 


居 2 人 hm， 着 人 站 护 人 及 与 院 方 委 清 二 人、 


本 日 用 只 及 四 季 归 流 胡 机 。 其他 让 机， 兴 
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中 国 养老 





[er 全 ia 
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(6) 在 每 段 文 字 的 前 面 输入 &nbsp:&nbsp:， 设 置 文字 空格 ， 如 


moon ne « 3 mm VN 





妈 11-19 所 示 。 


EEC 














5 


毛 和 ,办 丁 ,看 生 扫 局 晤 有 
加 大 属相 册 。 





a EL Dlr me 


加 
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(7) 将 光标 置 于 文字 下 边 , 在 代码 视图 中 输入 如 下 代码 , 插入 水 平 线 , 如 图 11-20 所 示 。 


<hr size="3" width="1002" align="center" color="#D1CA03"> 











二 



















议 书 一 式 两 价 。 
三 、 有 灶神 病 、 惟 染病 的 信者 不 得 入 位 - 
四、 院 方 提供 祺 大、 床单 、 忧 委 。 入住 老人 尘 训 大 棉 钙 、 状 心 、 肚 起、 毛巾 、 水 怀 


包括 电费 ) 由 家 恬 担 为。 


9 老人 的 物 玩 生 活 和 文化 生活 术 在 位 , 职 


护 人 员 与 院 方 和 申请 赤 一 份 、 


理 龟 等 日 用 品 及 由 未 换 基本 服 。 世 他 多 余 物 品 ， 请 不 


为 多 、 情 村 区 的 
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[= 人 masaa 








图 11-20 输入 代码 插入 水 平 线 





(8) 保存 网 页 ， 在 浏览 器 中 预览 效果 ， 可 以 看 到 如 图 11-21 所 示 的 效果 。 











可 
i 





全 所 广 六 可 和 信用， 信条 | 直下 
和 7、 半天 公 世人 站 全 及 与 玉 册 和 相生、 老人 屋子 东芝 大 类。 三民 
七 入 作 人 有 下 人 生活， 可 以 册 计 ， 旭 玉带， 
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本 章 小 结 


本 章 主 要 介绍 了 文本 相关 的 HTML 标签 和 属性 , 并 简要 地 介绍 了 使 用 Dreamweaver 辅 
助 设置 文本 的 方法 和 技巧 ， 以 及 用 Dreamweaver 提高 代码 编写 效率 的 方法 。 读 者 需要 理解 
的 是 本 章 所 讲 的 通过 设置 HTML 属性 来 确定 文本 的 特定 样式 ， 如 文本 颜色 、 对 齐 方式 等 。 


练 习 题 


1. 填空 题 


(1) 属性 的 值 可 以 有 多 种 指定 方式 ， 绝 对 尺寸 、 相 对 尺寸 、 长 度 、 百 分 比 
值 都 可 以 用 来 定义 。 

(2) font-weight 的 取 值 范围 包括 normal、bold、bolder、lighter、number。 其 中 normal 
表示 正常 粗细 ; bold 表示 ; bolder 表示 特 粗 体 ; lighter 表示 特 ; number 
不 是 真正 的 取 值 ， 其 范围 是 110 一 1100， 一 般 情况 下 都 是 整 百 的 数字 ， 如 200、300 等 。 

(3) 属性 定义 字体 的 风格 。 该 属性 设置 使 用 斜体 、 倾 儿 或 正常 字体 。 


2. 操作 题 
给 网 页 添加 CSS， 使 用 CSS 设置 文本 字体 样式 ， 如 图 11-22 所 示 。 
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人 合用 生产， 可 于 一人 的 要 椒 企业、 位 于 区 江汉 多 公司 并 于 2000 年 。 狗 丰 员工 250 人 ,注册 
江 人 400 万 元 .下 性 开发 区 本 第 ， 宛 水 人 公司 ， 电 半分 公司 公司 本 了 ISO9001 攻 县 林 系 认 匡 ， 大 及 于吉 站 汉 , 先 所 要 中 共 开 过关 
人 民有 内 和 记 近 S6 和 过 让 引 。 -其 责 和 进香 己基 考生 号， 林 玉 山本 百人 后 只 成 性 十 小 让 4， 山本 各 和 创新 二 下 
rT 

Et 
于 主机 和 有 TIE 并 目前 ,到 公司 已 生 基 5383 术 骨 可.59 守 区 新生 二天 可 和 大 寺 介 1 有 ,看 市 得 牙关， 类 
本 杀 届 “三 市 项 成 当 1 三 琴瑟 化 和 机 清秋 癌 民 了 丘 内 外 市 场记 月 二 .公司 本 六 司 及 生产 拉 术 的 全 和 7 了 
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第 12 章 用 CSS 设计 图 像 和 背景 


【学 习 目标 】 

图 像 是 网 页 中 最 重要 的 元 素 之 一 ， 图 像 不 但 能 美化 网 页 ， 而 且 与 文本 相 比 能 够 更 直观 
地 说 明 问 题 。 美 观 的 网 页 是 图 文 并 诚 的 ， 一 幅 幅 图 像 和 一 个 个 漂亮 的 按钮 ， 不 但 使 网 页 更 
加 美观 、 生 动 ， 而 且 使 网 页 中 的 内 容 更 加 丰富 。 可 见 ， 图 像 在 网 页 中 的 作用 是 非常 重要 的 。 
图 片 本 身 有 很 多 属性 可 以 直接 在 HTML 中 进行 调整 , 但 是 通过 CSS 统一 管理 , 不 但 可 以 更 
加 精确 地 调整 图 片 的 各 种 属性 ， 还 可 以 实现 很 多 特殊 的 效果 。 本 章 主 要 介绍 CSS 设置 图 像 
和 背景 图 片 的 方法 。 

本 章 主要 内 容 包 括 : 

(1) 熟悉 设置 网 页 的 背景 ; 

(2) 熟悉 设置 背景 图 像 的 属性 ; 

(3) 掌握 设置 网 页 图 像 的 样式 。 


12.1 设置 网 页 的 背景 


背景 属性 是 网 页 设计 中 应 用 非常 广泛 的 一 种 技术 。 通 过 背景 颜色 或 背景 图 像 ， 能 给 网 
页 带 来 丰富 的 视觉 效果 。HTML 的 各 种 元 素 基 本 上 都 是 支持 background 属性 。 


12.1.1 背景 颜色 : background-color 


在 HTML 中， 利用 <body> 标 签 中 的 bgcolor 属性 可 以 设置 网 页 的 背景 颜色 ， 而 在 CSS 
中 使 用 background-color 属性 不 但 可 以 设置 网 页 的 背景 颜色 ， 还 可 以 设置 文字 的 背景 颜色 。 

基本 语法 : 

background-color: 颜 色 取 值 ; 

语法 说 明 : 

背景 颜色 用 于 设置 对 象 的 背景 颜色 。 背 景 颜色 的 默认 值 是 透明 色 ， 大 多 数 情况 下 可 以 
不 用 此 方法 进行 设置 。background-color 属性 可 以 用 于 各 种 网 页 元 素 。 

实例 代码 : 

<!doctype html> 

<html> 


<head> 
<meta charset="utf-8"> 





<style> 
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.table { 
background-color: #66FF66;} 
</style> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table width="550" border="0"> 
<tbody> 
<tr> 
<tqd class="table"> 生 活 如 海水 , 就 在 你 面前 , 却 深 不 可 测 。 与 其 面 朝 大 海 , 等 待 春暖 花 开 ， 
莫如 握 一 束 阳光 的 暧 ， 从 容 而 行 ， 不 喜 不 莫 。 没 有 哪 棵 树 的 成 长 ， 不 需要 经 历 风 霜 。 人 生 就 是 这 样 ， 
经 历 了 无 数 磨难 ， 也 许 就 会 邦 然 开朗 。 给 自己 一 个 最 好 的 心情 ， 去 享受 人 生路 上 的 风景 ， 松 意 百 秋 
随 风 去 ， 放 容 一 笑 胜 千金 。</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


实例 中 加 粗 的 代码 background-color:#66FF66 定义 表格 的 背景 颜色 为 绿色 , 在 浏览 器 中 








预览 效果 如 图 12-1 所 示 。 


12. 
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12-1 背景 颜色 效果 


1.2 ”背景 图 像 : background-image 
背景 不 仅 可 以 设置 为 某 种 颜色 ，CSS 中 还 可 以 用 图 像 作为 网 页 元 素 的 背景 ， 而 且 用 途 


极为 广泛 。 使 用 background-image 属性 可 以 设置 元 素 的 背景 图 像 。 


的 全 
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基本 语法 : 
background-image:url (图 像 地 址 ) 


图 像 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 使 用 “CSS 规则 定义 ”对 话 框 的 “ 背 
类 别 中 的 “background-image” 可 以 定义 CSS 样式 的 背景 图 像 。 也 可 以 对 Web 页 面 中 





E 何 元 素 应 用 背景 属性 。 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
table { 
background-image: url(1.jpg);} 
</style> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table width="950" border="0"> 

<tbody> 

<tr> 
<tqd class="table"><p> 小 道 清幽 宁静 ， 我 的 思绪 在 过 往 与 现实 间 徘徊 ， 就 这 般 静 静 地 走 着 

吧 , 谁 会 知道 前 方 的 风景 如 何 呢 ? 荞 然 之 间 , 一 棵 树 身 刻字 的 沧桑 老 树 映 入 眼帘 , 此 心 不 由 一 阵 怪 动 。 
在 那 青春 岁月 里 ， 那 些 曾 一 起 铭刻 于 树 身 的 拆 言 ， 而 今 是 随 岁月 斑 驱 而 落 ， 留 下 了 难以 愈合 的 伤痕 ， 
于 寒 风 间 无 助 悲歌 呢 , 还 是 依旧 至 死 不 渝 , 仍 在 为 彼此 的 约定 而 相伴 不 弃 呢 ? 秋风 凌乱 了 多 少 的 痢 妄 ， 
终究 是 看 那 人 的 故事 ， 活 着 自己 的 落寞 。 清 宁 岁 月 匆 促 而 过 ， 却 终究 是 带 不 去 太 多 的 往事 。</p> 

<p> 岁 月 筑 篇 ,遥望 过 往 。 那 些 青葱 岁月 都 已 悄然 而 过 ， 留 下 了 着 恋 与 蒙 绕 心间 的 不 舍 , 带 去 了 身 
昱 熟悉 的 身影 与 欢歌 笑语 。 任 青春 之 弦 ， 深 情 颂歌 ， 歌 唱 那些 难以 忘怀 的 苦涩 泪水 ， 歌 唱 那些 曾 有 
的 欢乐 每 一 刻 ， 歌 唱 那些 青 涩 的 情怀 荡 起 心 湖 的 涟 洲 。 我 愿 虔诚 地 祝福 一 路 相伴 的 每 一 个 人 ， 愿 过 
往 之 事 于 心间 永存 ， 愿 相伴 之 人 不 因 时 间 与 距离 而 改变 ! </p> 

</td> 

ER 

</tbody> 
</table> 
</body> 
</html> 


本 实例 加 粗 代码 使 用 background-image: url(1.jpg): 定 义 了 背景 图 像 ,在 浏览 器 中 预览 如 
图 12-2 所 示 。 
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12-2 ”背景 图 像 效果 
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12.2 设置 背景 图 像 的 属性 


利用 CSS 可 以 精确 地 控制 背景 图 像 的 各 项 设置 。 可 以 决定 是 否 铺 平 及 如 何 铺 


凡 








背景 











图 像 应 该 滚动 还 是 保持 固定 ， 以 及 将 其 放 在 什么 位 置 。 





12.2.1 设置 背景 重复 : background-repeat 




















使 用 background-repeat 属性 设置 是 否 及 如 何 重复 背景 图 像 。 图 像 的 重复 方式 共有 4 种 





平 铺 选项 ， 分 别 是 不 重复 、 重 复 、 横 向 重复 、 纵 向 重复 。 


基本 语法 : 

background-repeat: no-repeat | repeat| repeat-x| repeat-y; 
语法 说 明 : 

background-repeat 的 属性 值 见 表 12-1。 


表 12-1 background-repeat 的 属性 值 


no-repeat 背景 图 像 不 重复 ， 仅 显示 一 次 


默认 。 背 景 图 像 将 在 垂直 方向 和 水 平方 向 重复 
背景 图 像 只 在 水 平方 向 上 重复 
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背景 图 像 只 在 简 直 方向 上 重复 


实例 代码 ; 
其 CSS 代码 如 下 ， 使 用 background-repeat: repeat-y 定义 背景 图 像 在 垂直 方向 重复 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
-wu { 
background-image: url(2.jpg); background-repeat: repeat-y; 
} 
</style> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table width="650" border="0"> 
<tbody> 
<tr> 
<tqd class="wu"><p> 总 有 这 样 的 心境 ， 就 像 走 进 有 山 有 水 的 地 方 ， 远 离 喧 器 、 远 离 热 闹 、 远 
离 那些 尘土 的 飞扬 。 心 安静 在 山水 间 ， 无 喜 无 忧 也 无 烦恼 ， 尽 情 享受 在 自然 的 怀抱 ， 尽 情 把 心情 释 
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放 。 隐 隐 的 疼痛 渐渐 化 去 ， 浓 浓 的 相思 渐渐 随 着 白云 而 淡 散 在 远方 。 心 终归 是 寂寞 的 ， 哪 怕 置 身 于 热 
闸 。 灵 魂 终究 是 孤独 的 ， 哪 怕 进 入 天 堂 。 一 个 人 的 伤 ， 终 要 时 间 疗 。 一 个 人 的 痛 ， 终 需 栽 进 生 命 里 面 
一 些 阳光 。 只 要 有 笑 声 的 地 方 就 会 减 却 烦 恼 ， 只 要 充满 阳光 的 地 方 ， 温 暧 就 会 在 生命 里 荡 澜 。</p> 
<p>&nbsp; </p> 
<p>&nbsp; </p> 
<p>&nbsp; </p> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


在 网 站 中 , 带 背 景 图 像 的 网 页 是 最 常见 的 , 使 用 背景 图 像 可 以 美化 网 页 效果 , 如 图 12-3 
所 示 。 
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12-3 ”背景 图 像 


12.2.2 ”设置 固定 背景 : background-attachment 


页 中 ， 背 景 图 像 通 常会 随 网 页 的 滚动 而 一 起 滚动 。 利 用 CSS 的 固定 背景 属性 ， 可 
以 建立 不 滚动 的 背景 图 像 ， 页 面 滚动 时 ， 背 景 图 像 可 以 保持 固定 。 固 定 背景 属性 一 般 都 是 
用 于 整个 网 页 的 背景 图 像 ， 即 <body> 标 签 内 容 设 定 的 背景 图 像 。 
基本 语法 : 


background-attachment: scroll | fixed; 
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语法 说 明 : 
background-attachment 的 属性 值 见 表 12-2。 


表 12-2 background-attachment 参数 的 属性 




















1 

1 

1 

1 

1 

! 

| 属性 值 描 述 

| scroll 随 对 象 内 容 滚 动 

1 fixed 固定 

1 

1 实例 代码 ; 

1 

1 <style> 

| sm 

! background-image: url(2.jpg); background-attachment: fixed; 
} 
</style> 
使 用 background-attachment:fixed 可 以 保持 背景 图 像 固定 ， 在 浏览 器 中 预览 如 图 12-4 

所 示 。 
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消 ， 终 需 者 齐 生 语 | 
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图 12-4 固定 背景 网 页 


12.2.3 ”设置 背景 定位 : background-position 


除了 图 像 重 复方 式 的 设置 ，CSS 还 提供 了 背景 图 像 定位 功能 。 背 景 定位 用 于 设置 对 象 
的 背景 图 像 位 置 ， 必 须 先 指 定 background-image 属性 。 
基本 语法 : 


background-position: 450px 360px; 
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语法 说 明 : 
background- position 的 属性 值 见 表 12-3。 





表 12-3 background- position 的 属性 值 







设置 网 页 的 横向 位 置 ， 其 单位 可 以 是 所 有 尺度 单位 
设置 网 页 的 纵向 位 置 ， 其 单位 可 以 是 所 有 尺度 单位 








实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
-wu { 
background-image: url(3.jpg); 
background-repeat: repeat-y; 
background-attachment: fixed; 
background-position: 40px 60px; 
. 
</style> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table width="700" border="0"> 
<tbody> 
<tr> 
<td valign="top" class="wu"><p> 总 有 这 样 的 心境 ， 就 像 走 进 有 山 有 水 的 地 方 ， 远 离 喧 
器 、 远 离 热闹 、 远 离 那 些 尘土 的 飞扬 。 心 安静 在 山水 间 ， 无 喜 无 忧 也 无 烦恼 ， 尽 情 享受 在 自然 的 怀 
抱 ， 尽 情 把 心情 释放 。 隐 隐 的 疼痛 渐渐 化 去 ， 浓 浓 的 相思 渐渐 随 着 白云 而 淡 散 在 远方 。 心 终归 是 疲 
寞 的 ， 哪 怕 置 身 于 热闹 。 灵 魂 终究 是 孤独 的 ， 哪 怕 进 入 天 堂 。 一 个 人 的 伤 ， 终 要 时 间 疗 。 一 个 人 的 
痛 ， 终 需 栽 进 生命 里 面 一 些 阳光 。 只 要 有 笑 声 的 地 方 就 会 减 却 烦 恼 ， 只 要 充满 阳光 的 地 方 ， 温 暖 就 
会 在 生命 里 荡 澜 。</p> 
<p>gnbsp;</p></td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


背景 图 像 定 位 功能 可 以 用 于 图 像 和 文字 的 混合 排版 中 ， 将 背景 图 像 定 位 在 适合 的 位 置 
上 ， 以 获得 最 佳 的 效果 ， 如 图 12-5 所 示 的 网 页 就 是 采用 背景 图 像 的 定位 功能 将 图 像 和 文字 
混 排 。 
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12-5 ”图 像 和 文字 混 排 


12.3 ”设置 网 页 图 像 的 样式 


在 网 页 中 恰当 地 使 用 图 像 ， 能 够 充分 展现 网 页 的 主题 和 增强 网 页 的 美感 ， 同 时 能 够 极 
大 地 吸引 浏览 者 的 目光 。 网 页 中 的 图 像 包 括 Logo、Banner、 广 告 、 按 钮 及 各 种 装饰 性 的 图 
标 等 。CSS 提供 了 强大 的 图 像样 式 控制 功能 ， 以 帮助 用 户 设计 专业 、 美 观 的 网 页 。 


12.3.1 设置 图 像 边 框 


默认 情况 下 ， 图 像 是 没有 边框 的 ， 通 过 “边框 ”属性 可 以 为 图 像 添加 边框 线 。 定 义 图 
像 的 边框 属性 后 ， 在 图 像 四 周 出 现 了 5px 宽 的 实 线 边框 ， 效 果 如 图 12-6 所 示 。 

其 CSS 代码 如 下 : 

-wu { 

border: 5px solid #F00; 

} 

可 以 设置 边框 的 外 观 样 式 ， 可 以 分 别 设置 每 条 边框 的 颜色 、 虚 线 或 实 线 等 。 例 如 设置 
5px 的 虚线 边框 ， 效 果 如 图 12-7 所 示 。 

其 CSS 代码 如 下 : 

-WU 1{ 


border: 5px dashed #F00; 
} 
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图 12-6 图像 边框 效果 12-7 ”虚线 效果 图 
通过 改变 边框 样式 、 宽 度 和 颜色 ， 可 以 得 到 下 列 各 种 不 同 效 果 。 
(1) 设置 “border: 5px dotted #00”， 效 果 如 图 12-8 所 示 。 
(2) 设置 “border: 5px double #00”， 效 果 如 图 12-9 所 示 。 





























图 12-8 点 画 线 效果 12-9 双 线 效果 


(3) 设置 “border: 30px groove 本 00”， 效 果 如 图 12-10 所 示 。 
(4) 设置 “border: 30px ridge 考 00”， 效 果 如 图 12-11 所 示 。 








图 12-10” 槽 状 效果 12-11 ” 背 状 效果 
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12.3.2 ”图 文 混合 排版 








在 网 页 中 如 果 只 有 文字 是 非常 单调 的 ， 因 此 在 段落 中 经 常会 插入 图 像 。 在 构成 网 页 的 
诸多 要 素 中 ， 图 像 是 形成 设计 风格 和 吸引 视觉 的 重要 因素 之 一 。 如 图 12-12 所 示 的 网 页 就 





是 图 文 混 排 的 网 页 。 





图 12-12 图 文 混 排 的 网 页 
为 了 使 文字 和 图 像 之 间 保 留 一 定 的 内 边 距 ， 还 要 定义 填充 属性 ， 其 CSS 代码 如 下 。 


.Yang { 
padding: 12px; 
float: right; 
} 


预览 效果 如 图 12-13 所 示 。 
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12-13 ”图 像 居 右 效果 
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如 果 要 使 图 像 居 左 ， 用 同样 的 方法 设置 : float: left， 其 代码 如 下 。 
-Yang { 

padding: 12px; 

float: left; 








} 
预览 效果 如 图 12-14 所 示 。 





12-14 图像 居 左 效果 


12.4 ”综合 实例 一 一 给 图 片 添加 边框 


前 面 几 节 我 们 学 习 了 图 像 和 背景 的 设置 ， 下 面 我 们 通过 实例 来 具体 讲述 操作 步 又， 以 
达到 学 以 致 用 的 目的 。 

网 页 中 插入 图 片 的 时 候 ， 我 们 经 常 要 给 图 片 加 上 些 修饰 ， 比 如 加 上 边框 或 者 阴影 等 ， 
下 面 介绍 一 个 用 CSS 给 图 片 加 上 边框 的 例子 ， 具 体操 作 步 骤 如 下 。 

(1) 启动 Dreamweaver CC， 打 开 原 始 文 档 ， 如 图 12-15 所 示 。 




















12-15 ”打开 文档 
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(2) 打开 “ 拆 分 ”视图 ， 在 <head> 标 签 中 输入 代码 <style></style>， 定 义 样式 标签 ， 如 


图 12-16 所 示 。 








河内 
A 





1 .wv 
图 12-16 输入 代码 
(3) 在 <style> 标 签 中 输入 下 列 代码 设置 图 像 边 框 为 红色 虚线 ， 如 图 12-17 所 示 。 


.ynag { 
border: 5px dotted #CB9700; 


je pose js nop esos 











图 12-17 设置 边框 属性 


(4) 在 定义 的 标签 中 输入 下 列 代 码 , 设置 图 像 的 对 齐 方式 和 对 齐 边 距 , 如 图 12-18 所 示 。 


padding: 5px; 
float: right; 
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图 12-18 设置 图 像 对 齐 方式 
选择 图 像 ， 在 属性 面板 中 单 击 选中 设置 的 样式 应 用 ， 如 


途 


(5) 打开 “设计 ”视图 ， 关 
图 12-19 所 示 。 
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图 12-19 应 用 样式 
(6) 保存 文档 ， 在 浏览 器 中 预览 ， 效 果 如 图 12-20 所 示 。 
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12-20 ”预览 效果 


本 章 小 结 


本 章 介绍 了 关于 使 用 图 像 的 一 些 相关 设置 方法 。 可 以 看 到 , 使 用 CSS 对 图 像 进行 设置 ， 
无 论 是 边框 的 样式 、 与 周围 文字 的 间隔 ， 还 是 与 旁边 文字 的 对 齐 方式 等 ， 都 可 以 做 到 非常 
精确 、 灵 活 的 设置 ， 这 些 都 是 使 用 HTML 中 <img> 标 签 的 属性 所 无 法 实现 的 。 


练 习 题 
1. 填空 题 
(1) 在 HIML 中 , 利用 <body> 标 签 中 的 属性 可 以 设置 网 页 的 背景 颜色 , 而 在 
CSS 中 使 用 属性 不 但 可 以 设置 网 页 的 背景 颜色 , 还 可 以 设置 文字 的 背景 颜色 。 
(2) 背景 图 像 定 位 功能 可 以 用 于 中 ,将 背景 图 像 定位 在 适 





合 的 位 置 上 ， 以 获得 最 佳 的 效果 。 
(3) 在 边框 分 类 中 的 “style” 下 拉 列 表 中 可 以 选择 边框 的 样式 外 观 。Dreamweaver 在 


文档 窗口 中 将 所 有 样式 呈现 为 。 取 消 选择 “全 部 相同 ”可 设置 元 素 各 个 边 的 边框 
样式 。 “width” 设 置 元 素 边 框 的 a ”设置 边框 的 颜色 。 可 以 分 别 设置 
每 条 边框 的 颜色 。 

2. 操作 题 


给 网 页 图 像 和 文本 设置 边框 效果 ， 如 图 12-21 所 示 。 
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图 12-21 ”给 网 页 添加 边框 
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第 13 章 用 CSS 设计 表格 和 表单 样式 


【学 习 目 标 】 

表格 是 网 页 制作 中 使 用 得 最 多 的 工具 之 一 ， 通 过 表格 配合 文字 和 精美 的 图 片 ， 才 能 完 
成 优秀 的 网 页 。 表单 是 网 页 设计 中 重要 的 对 象 之 一 , 特别 是 动态 交互 式 网 页 更 是 不 可 缺少 。 
使 用 表单 可 以 轻松 地 完成 对 各 种 数据 的 收集 ， 它 是 网 站 管理 者 与 浏览 者 之 间 沟 通 的 桥梁 。 
收集 、 分 析 用 户 的 反馈 意见 ， 并 做 出 科学 、 合 理 的 决策 ， 是 一 个 网 站 成 功 的 主要 因素 。 

本 章 主要 内 容 包 括 : 

(1) 网 页 中 的 表格 ; 

(2) 网 页 中 的 表单 。 


13.1 网 页 中 的 表格 


表格 是 网 页 中 对 文本 和 图 像 布 局 的 强 有 力 的 工具 。 一 个 表格 通常 由 行 、 列 和 单元 格 组 
成 ， 每 行 由 一 个 或 多 个 单元 格 组 成 。 表 格 中 的 横向 称 为 行 ， 表 格 中 的 纵向 称 为 列 ， 表 格 中 
一 行 与 一 列 相交 所 产生 的 区 域 称 为 单元 格 。 


13.1.1 表格 对 象 标签 


表格 的 基本 组 成 如 图 13-1 所 示 ， 表 格 的 行 、 列 和 单元 格 都 可 以 进行 复制 、 粘 贴 ， 在 表 
格 中 还 可 以 插入 表格 ， 表 格 嵌 套 使 设计 更 加 方便 。 


裤 








13-1 表格 的 基本 组 成 


<table> 标 签 和 </table> 标 签 分 别 表示 表格 的 开始 和 结束 ， 而 <tr> 和 </te> 则 分 别 表示 行 的 
开始 和 结束 ， 在 表格 中 包含 几 组 <tr></tr>， 就 表示 该 表格 为 几 行 ，<td> 和 </td> 表 示 单 元 格 





第 13 章 用 CSS 设计 表 茧 和 表 里 样 式 


的 起 始 和 结束 。 
如 图 13-1 所 示 的 3 行 3 列 的 表格 ，HIML 代码 如 下 所 示 。 





<table width="444" height="246" border="]1" cellpadding="1" cellspacing="1" 
bordercolor="#FF0000"> 
<tr> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
< 
<tr> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
<td bgcolor="#999966">gnbsp;</td> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
A 
<tr> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
<td bgcolor="#FFOO0FF">&nbsp;</td> 
/Er 
</table> 


此 外 表格 还 有 <caption><tbody><thead> 和 <th> 标 签 。 

<caption>: 可 以 通过 <caption> 来 设置 标题 单元 格 ， 一 个 <table> 表 格 只 能 含有 一 个 
<caption> 标 签 来 定义 表格 标题 。 

<tbody>: 用 于 定义 表格 的 内 容 区 ， 如 果 一 个 表格 由 多 个 内 容 区 构成 ， 可 以 使 用 多 个 
<tbody> 组 合 。 

<thead> 和 <th>: <thead> 用 于 定义 表格 的 页 眉 ，<th> 定 义 页 眉 的 单元 格 ， 通 过 适当 地 标 
出 表格 的 页 眉 可 以 使 表格 更 加 有 意义 。 





13.1.2 ”在 Dreamweaver 中 插入 表格 
在 Dreamweaver 中 插入 表格 非常 简单 ， 具 体操 作 步 所 EC 

















又 如 下 。 四 
(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 将 光标 于 


置 于 在 要 插入 表格 的 位 置 ， 选 择 “ 插 入 ”一 “表格 ” 菜 “中 | 
单项 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 设 呈 
置 为 3，“ 列 数 ”设置 为 3，“ 表 格 宽度 ”设置 为 500 人 
像素 ，“ 边 框 粗细 ”“ 单 元 格 边 距 ”“ 单 元 格 间距 ”分 | 于 
别 设置 为 0， 如 图 13-2 所 示 。 

(2) 单 击 “确定 ”按钮 , 插入 表格 , 如 图 13-3 所 示 。 

G) 选中 表格 ,在 “属性 ”面板 中 将 表格 的 “填充 ” 图 13-2 “表格 ”对 话 框 









































BE] 3 取消 
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设置 为 2，“ 间 距 ”设置 为 2，“ 边 框 ” 设 置 为 2，“ 边 框 颜色 ”设置 为 #000000，“ 背 景 颜 
色 ” 设 置 为 本 F9933， 如 图 13-4 所 示 。 























WEE | 
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图 13-3 插入 表格 图 13-4 设置 表格 属性 


13.1.3 ”设置 表格 的 颜色 


表格 的 颜色 设置 比较 简单 ， 通 过 color 属性 设置 表格 中 文字 的 颜色 ， 通 过 background 
属性 设置 表格 的 背景 颜色 等 。 如 下 所 示 的 CSS 代码 定义 了 表格 的 颜色 。 


<style> 

并 = 

body{ 
background-color: #FDF5FE; /+* 页 面 背景 色 */ 
margin:0px; padding:5px; 





text-align:center; /* 居中 对 齐 (IE 有 效 ) */ 
} 
.datalist{ 
Color: #FFFFFF; /* 表格 文字 颜色 */ 
background-color: #339900;  /* 表格 背景 色 */ 
font-family:Arial; /* 表格 字体 */ 


了 
.datalist captiont{ 
font-size:19px; /* 标题 文字 大 小 */ 
font-weight:bold; /* 标题 文字 粗 体 */ 
} 
.datalist tht{ 
color: #FFFFO00; /* 行 、 列 名 称 的 颜色 */ 
background-color: #006600;  /* 行 、 列 名 称 的 背景 色 */ 
} 
-> 
</style> 
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在 浏览 器 中 浏览 效果 如 图 13-5 所 示 。 





司 DAHTML+DIV+CSS 页 DD” C 情 无 奈 要 文 仿 
文件 (有 篇 强 (6。 查看 (V) 。 收 赣 交 (A) 工具 (T) 帮 动 (H) 

















13-5 ”表格 颜色 


13.1.4 设置 表格 的 边框 样式 


边框 作为 表格 的 分 界 在 显示 时 往往 必 不 可 少 。 根 据 不 同 的 需求 ， 可 以 对 表格 和 单元 格 
应 用 不 同 的 边框 。 可 以 定义 整个 表格 的 边框 ， 也 可 以 对 单独 的 单元 格 分 别 进行 定义 。CSS 
的 边框 属性 是 美化 表格 的 一 个 关键 元 素 ， 利 用 CSS 可 以 定义 各 种 边框 样式 。 

对 于 需要 重复 使 用 的 样式 都 是 使 用 (class 类 ) 选 择 器 来 定义 。class 选择 器 可 以 在 同一 页 
面 中 重复 使 用 ， 大 大 提高 了 设计 效率 ,简化 了 CSS 代码 的 复杂 性 ，class 选择 器 在 实际 的 网 
页 设计 中 应 用 非常 普遍 。 

下 面 就 利用 class 选择 器 来 定义 表格 的 边框 ， 其 CSS 代码 如 下 所 示 。 


<style type="text/css"> 

.bottomborder { 
border-top-width: 2px; 
border-right-width: 2px; 
border-bottom-width: 2px; 
border-left-width: 2px; 
border-top-color: #009900; 
border-right-color: #009900; 
border-bottom-color: #009900; 
border-left-color: #009900; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 

















. 
</style> 


在 浏览 器 中 浏览 ， 效 果 如 图 13-6 所 示 。 
在 网 页 中 有 许多 实 线 和 圆 角 表格 ， 可 以 起 到 很 好 的 装饰 作用 ， 如 图 13-7 和 图 13-8 
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图 13-6 表格 边框 
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13-7” 实 线 表格 





图 13-8 圆 角 表格 
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13.1.5 ”设置 表格 的 阴影 


利用 CSS 可 以 给 表格 制作 出 阴影 效果 ， 新 建 一 个 样式 “.boldtable”， 将 样式 应 用 于 表 
格 中 即 可 。 
其 CSS 代码 如 下 所 示 ， 分 别 定义 了 表格 的 上 下 左右 边框 的 颜色 、 样 式 和 宽度 。 


-boldtable { 
border-top-width: lpx; 
border-right-width: 6px; 
border-bottom-width: 6px; 
border-left-width: lpx; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #FFFFFF; 
border-right-color: #999999; 
border-bottom-color: #999999; 
border-left-color: #999999;} 


在 浏览 器 中 浏览 ， 效 果 如 图 13-9 所 示 。 
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13-9 ”阴影 表格 


13.2 ”网 页 中 的 表单 


表单 的 作用 是 可 以 与 站 点 的 访问 者 进行 交互 ， 或 收集 信息 ， 然 后 提交 至 服务 器 进行 处 
理 ， 表 单 中 可 以 包含 各 种 表单 对 象 。 


13.2.1 表单 对 象 
表单 由 两 个 重要 的 部 分 组 成 : 一 是 在 页 面 中 看 到 的 表单 界面 ， 二 是 处 理 表单 数据 的 程 
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序 ， 它 可 以 是 客户 端 应 用 程序 ， 也 可 以 是 服务 器 端的 


程序 。 


创建 表单 后 ， 需 要 在 其 中 添加 表单 对 象 才能 实 
现 表 单 的 作用 ， 可 以 插入 到 表单 中 的 对 象 有 文本 域 、 
单 选 按钮 、 复 选 框 、 列 表 / 菜 单 、 按 钮 和 图 像 域 等 ， 
它们 聚集 在 Dreamweaver 中 的 “表单 ”插入 栏 中 ， 如 
图 13-10 所 示 。 


13.2.2 ”表单 标签 


表单 是 网 页 上 的 一 个 特定 区 域 , 这 个 区 域 是 由 一 
对 <form> 标 签 定义 的 。 这 个 标签 有 如 下 作用 。 

一 方面 ， 限 定 表单 的 范围 。 其 他 的 表单 对 象 都 要 
插入 表单 之 中 ， 单 击 提交 按钮 时 ， 提 交 的 也 是 表单 范 
围 内 的 内 容 。 

另 一 方面 ， 表 单 的 相关 信息 ， 例 如 处 理 表 单 的 肢 
本 程序 的 位 置 、 提 交 表 单 的 方法 等 ， 对 于 浏览 者 是 不 
可 见 的 ， 但 对 于 处 理 表单 的 确 有 着 决定 性 的 作用 。 





| 


















































10 noadH 人 日 上 DAeo 昌 全 口 如 鬼 
加 





基本 语法 : 13-10 “表单 ”插入 栏 


<form name="form name" method="method" action="url" enctype="value" 
target="target_win"> 
</form> 


<form> 标 签 的 属性 如 下 所 示 。 


name: 表单 的 名 称 。 

method: 定义 表单 结果 从 浏览 器 传送 到 服务 器 的 方法 ， 一 般 有 两 种 方法 : get 和 
post。 

action: 用 来 定义 表单 处 理 程序 (ASP、CGI 等 程序 ) 的 位 置 。 

enctype: 设置 表单 资料 的 编码 方式 。 

target: 设置 返回 信息 的 显示 方式 。 


此 外 还 包括 写 入 标签 <input> 、 菜 单 下 拉 列 表 框 <select><option>、 多 行 的 文本 框 


<textarea>。 


13.2.3 ”表单 的 布局 设计 

表单 的 布局 是 指 表单 在 页 面 中 的 排版 形式 ， 为 了 美化 页 面 ， 常 常 将 表单 元 素 设计 不 同 
的 外 观 样式 。 可 以 给 文本 框 设置 不 同 的 背景 色 、 边 框 和 文字 颜色 等 。 对 于 一 些 大 型 的 网 站 ， 
它们 的 表单 布局 设计 都 非常 简洁 美观 。 


如 图 
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13-11 所 示 的 网 站 客户 留言 表单 页 面 简洁 而 美观 。 
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13-11 ”网 站 客户 留言 表单 


页 面 由 一 个 居中 的 DIV 对 象 作为 表单 的 主 容器 ， 在 这 个 容器 内 用 一 个 表格 来 布局 表单 
对 象 ， 表 格 对 数据 的 排列 方式 非常 适合 于 表单 元 素 的 排版 。 因 此 表格 是 表单 布局 的 主要 工 
有 具 ， 目 前 很 多 大 型 网 站 都 采用 表格 来 对 表单 进行 布局 ， 特 别 是 一 些 复杂 的 表单 。 

常见 的 表单 都 是 左右 两 列 式 表单 ， 左 侧 为 项 目 名称 ， 右 侧 为 表单 对 象 ， 如 文本 框 、 下 
拉 列 表 或 菜单 等 。 因 此 在 布局 表单 时 ， 使 用 一 个 2 列 的 表格 非常 合适 ， 如 图 13-12 所 示 。 
其 代码 如 下 。 


<div id="reg"> 
<form name="forml" method="post" action="kefu@163.com"> 
<table width="95%" border="0" align="center" cellpadding="3" 
cellspacing="0"> 
<tr> 
<td width="22%" align="right"><span class="style2"> 客 户 姓 名 : </span></td> 
<td width="78%"><input name="textfield" type="text" size="20"></td> 
/Er 
<tr> 
<td align="right" class="style2"> 到 达 日 期 : </td> 
<td><input name="textfield2" type="text" size="20"></td> 
= AE 
<tr> 
<td align="right" class="style2"> 房 间 将 留 至 : </td> 
<td> 
<label><input name="textfield3" type="text" size="20"></label> 
</td> 
</tr> 
<tr> 
<td align="right" class="style2"> 入 住人 数 : </td> 
<td><input name="textfield4" type="text" size="20"></td> 
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<AEr> 
<tr> 
<td align="right" class="style2"> 入 住房 间 : </td> 
<td><span Class="unnamed1"> 
<select name="select"> 
<option value="1" selected> 高 级 双人 房 </option> 
<option value="2"> 高 级 单 人 房 </option> 
<option value="3"> 豪 华商 务 双人 房 </option> 
<option value="4"> 豪 华商 务 单 人 房 </option> 
<option value="5"> 精 致 套房 </option> 
<option value="6"> 豪 华 套 房 </option> 
<option value="7"> 长 城 套房 </option> 


</select> 
</span> 
</td> 
</tr> 
<tr> 


<td align="right" class="style2"> 付 款 方式 : </td> 
<td><input type="radio" name="radiobutton" value="radiobutton"> 
<span class="style2"> 现 金 
<input type="radio" name="radiobutton" value="radiobutton"> 信 用 卡 
<input type="radio" name="radiobutton" value="radiobutton"> 支 票 </span> 
</td> 
</tr> 
EE 
<td align="right" class="style2"> 要 求 设置 </td> 
<td class="style2"> 
<input type="checkbox" name="checkbox" value="checkbox"> 电 视 
<input type="checkbox" name="checkbox2" value="checkbox"> 网 络 
<input type="checkbox" name="checkbox3" value="checkbox">VCD 
</td> 
</tr> 
<tr> 
<td align="right" class="style2"> 备 注 : </td> 
<td><textarea name="textarea" cols="45" rows="8"></textarea></td> 
</tr> 
<tr> 
<td>gnbsp;</td> 
<td><input type="submit" name="Submit" value=" 提 交 "> 
<input type="reset" name="Submit2" value=" 重 置 "></td> 
</Etr> 
</table> 
</form> 
</div> 









第 13 章 用 CSS 设计 表 茧 和 表 里 样 式 


酒店 订房 


窟 户 姓名 ， 
到 日 期 ; 
导 同 将 留 至， 
入 住人 数 : 
入住 店 间 。 再 级 双人 房 ” 司 
这 到，O 现 全 〇 信用 卡 〇 支 村 
要 平 设置 ， 口 电视 口 网 多 口 vep 





图 13-12 用 表格 布局 表单 
这 里 将 整个 表单 放 在 一 个 名 称 为 “reg” 的 DIV 中 ， 然 后 插入 了 一 个 9 行 2 列 的 表格 ， 
表单 对 象 整齐 地 排列 在 单元 格 中 , 还 可 以 通过 CSS 设置 表格 的 样式 , 其 中 的 CSS 代码 如 下 
所 示 。 
#reg { 
background-color: #ffcccc; 











} 

#reg table { 
font-size: 12px; 
color: #003333; 
width: 530px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 


上 面 的 CSS 代码 设置 了 要 eg 对 象 的 背景 颜色 为 #ffcccc， 设 置 了 表格 内 文字 的 字号 为 
12px， 文 字 颜 色 为 #003333， 表 格 宽度 为 530px， 并 且 设 置 了 边框 样式 ， 在 浏览 器 中 浏览 效 
果 如 图 13-13 所 示 。 





入 和 | 而 人 局。 国 


们 蒜 万 式 。 〇 页 主 〇 信用 卡 〇 支 于 
要 来 交 村 ， 口 归口 网络 口 vcD 





Ea 国 
13-13 ”应 用 样式 后 表单 效果 
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13.2.4 ”设置 边框 样式 
表单 对 象 支持 边框 属性 ， 边 框 属性 提供 了 10 多 种 样式 , 通过 设置 边框 的 样式 、 宽 度 和 
颜色 ， 可 以 获得 各 种 不 同 的 效果 。 其 CSS 代码 如 下 所 示 。 


Tor nt 
border: 3px solid #00C13A; 
} 


该 代码 设置 边框 粗细 为 3px, 边框 颜色 为 #00C13A, 在 浏览 器 预览 效果 如 图 13-14 所 示 。 
ws: 


Wh [| |] 


图 13-14 对 文本 框 应 用 样式 


13.2.5 设置 背景 样式 


还 可 以 设置 表单 对 象 的 背景 颜色 和 背景 图 像 。 
输入 如 下 CSS 代码 可 以 设置 表单 背景 颜色 ， 在 浏览 器 中 浏览 网 页 ， 效 果 如 图 13-15 
OF 4 

border: 3px solid #00C13A; 


background-color:#A8FFA8; 
} 


ss: 一 一 


wae: CC 
ao 


性 别 : C 男 C 〇 女 


am; [Eo 


图 13-15 设置 表单 对 象 背景 图 像 后 的 效果 
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13.2.6 ”设置 输入 文本 的 样式 


利用 CSS 样式 可 以 控制 浏览 者 输入 文本 的 样式 ， 起 到 美化 表单 的 作用 。 
将 样式 表 应 用 到 表单 对 象 中 , 其 CSS 代码 如 下 , 在 浏览 器 中 浏览 效果 如 图 13-16 所 示 。 


.formstyle { 
border: lpx solid #666666; 
background-color: #FFCCFF; 
background-repeat: repeat-x; 
font-family: "隶书 "7 
color: #993300; 




















13-16 ”设置 输入 文本 的 样式 


13.3 综合 实例 


表格 最 基本 的 作用 就 是 让 复杂 的 数据 变 得 更 有 条 理 ， 让 人 容易 看 懂 ， 在 设计 页 面 时 ， 
往往 要 利用 表格 来 排列 网 页 元 素 。 下 面 通过 几 个 实例 介绍 表格 的 使 用 技巧 。 


综合 实例 1 一 一 制作 变换 背景 色 的 表格 


如 果 希 望 浏览 者 特别 留意 某 个 表格 属性 ， 可 以 在 设计 表格 时 添加 简单 的 CSS 语法 ， 当 
浏览 者 将 鼠标 指针 移 到 表格 上 时 ， 就 会 自动 变换 表格 的 背景 色 ;， 当 鼠标 指针 离开 表格 ， 即 
会 恢复 原来 的 背景 色 (或 是 换 成 男 一 种 颜色 )。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 13-17 所 示 。 

(2) 选择 要 变换 颜色 的 表格 ,切换 到 “ 拆 分 ”视图 ， 如 图 13-18 所 示 。 

(3) 在 <table> 标 签 中 输入 以 下 代码 ， 如 图 13-19 所 示 。 


onMouseOver="this.style.background="#FF3366'" 
onMouseOut="this.style.background="'#9FE417'" 





25 纺 





HTML+DIV+CSS 网 页 设计 与 布局 实用 教程 


























SR 
eS ne re 

1 

玉生 0 和 和 
eT 

Se 

re Ts a 现 ocnggcismiroooo 匡 AU 

ET 
ee i Ta ACE EP 









rae 








mm 











图 13-17 打开 网 页 文档 
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DE A 
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13-18 “ 拆 分 ”视图 


A 姐 
= a 和 











13-19 输入 代码 








由 由 第 13 音 ” 用 CSS 设计 表 阁 和 表 蛙 样式 
WILL 


(4) 保存 文档 ， 在 浏览 器 中 预览 效果 ， 光 标 没有 移 到 表格 上 时 如 图 13-20 所 示 ， 光 标 
移 到 表格 上 时 如 图 13-21 所 示 。 


Ss = 一 


13-20 ”光标 没有 移 到 表格 上 时 

















13-21 ”变换 背景 色 的 表格 


综合 实例 2 一 一 设计 表单 的 样式 


设计 表单 样式 的 具体 操作 步骤 如 下 。 

(1) 使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 13-22 所 示 。 

(2) 打开 “ 拆 分 ”视图 , 在 <head> 和 </head> 之 间 相应 的 位 置 输入 以 下 代码 ， 如 图 13-23 
所 示 。 

<style type="text/css"> 

input.yst{ 

border:1 solid #FF9900; 

background-color: #FFCCO0; 


} 
</style> 
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图 13-22 ”打开 网 页 文档 





rok eo neeyt. te nh je jeery oqorelida 2 4,4 je Wclare jo 








ws 3 .ol x Io 





13-23 ”输入 代码 


怪 提示 : 定义 一 个 名 为 ys 的 按钮 样式 ， 将 边框 设置 为 1， 边 框 颜色 设置 为 #FF9900， 
背景 颜色 设置 为 狂 FCC00。 


(3) 对 要 设置 文本 框 样式 的 文本 框 套用 样式 ， 如 图 13-24 所 示 。 
(4) 保存 网 页 ， 在 浏览 器 中 预览 ， 效 果 如 图 13-25 所 示 。 
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图 13-24 ”对 要 设置 文本 框 样式 的 文本 框 套用 样式 








13-25 ”对 文本 框 应 用 样式 


本 章 小 结 


表格 作为 传统 的 HTML 元 素 ， 一 直 受 到 网 页 设计 者 们 的 青睐 。 使 用 表格 来 表示 数据 、 
制作 调查 表 等 应 用 在 网 络 中 屡见不鲜 。 同 时 因为 表格 框架 的 简单 、 明 了， 使 用 没有 边框 的 
表格 来 排版 ， 也 受到 很 多 设计 者 的 喜爱 。 

表单 是 交互 式 网 站 的 很 重要 的 应 用 之 一 ， 它 可 以 实现 交互 功能 ， 需 要 注意 的 是 本 章 所 
介绍 的 内 容 只 涉及 表单 的 设置 ， 不 涉及 具体 功能 的 实现 方法 ， 例 如 要 实现 一 个 真正 的 新 闻 
发 布 系统 ， 则 必须 具有 服务 器 程序 的 配合 ， 读 者 有 兴趣 的 话 ， 可 以 参考 其 他 相关 的 图 书 和 
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练 习 题 


1. 填空 题 
(1) 表格 是 网 页 中 对 文本 和 图 像 布 局 的 强 有 力 的 工具 。 一 个 表格 通常 由 、 和 


组 成 ， 每 行 由 一 个 或 多 个 单元 格 组 成 表格 中 的 横向 称 为 。 ， 表 格 中 的 纵向 称 


为 ， 表 格 中 一 行 与 一 列 相交 所 产生 的 区 域 称 为 pg 
(2) 表格 的 颜色 设置 比较 简单 ， 通 过 属性 设置 表格 中 文字 的 颜色 ， 通 过 
属性 设置 表格 的 背景 颜色 等 。 
(3) 表单 由 两 个 重要 的 部 分 组 成 : 一 是 在 页 面 中 看 到 的 ; 二 是 


， 它 可 以 是 客户 端 应 用 程序 ， 也 可 以 是 服务 器 端的 程序 。 
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2. 操作 题 
利用 <style> 标 签 制 作 表 单 网 页 ， 如 图 13-26 所 示 。 











图 13-26 ”制作 表单 网 页 





第 14 章 用 CSS 制作 链接 与 网 站 导航 


【学 习 目标 】 

一 个 优秀 的 网 站 ， 菜 单 和 导航 是 必 不 可 少 的 ， 导 航 菜单 的 风格 往往 也 决定 了 整个 网 站 
的 风格 ， 因 此 很 多 设计 者 都 会 投入 很 多 的 时 间 和 精力 来 制作 各 式 各 样 的 导航 。 本 章 主要 转 
绕 超 链接 的 制作 、 导 航 菜单 的 制作 、 有 序列 表 和 无 序列 表 以 及 各 种 导航 的 制作 来 展开 。 

本 章 主要 内 容 包括 : 

(1) 掌握 链接 标签; 

(2) 创建 按钮 式 超 链接 ; 

(3) 控制 鼠标 指针 ; 

(4) 设置 项 目 列表 样式 ; 

(5) 创建 简单 的 导航 菜单 。 


14.1 链接 标签 


CSS 提供 了 4 种 a 对 象 的 伪 类 ， 它 表示 链接 的 4 种 不 同 状态 ， 即 link( 未 访问 的 链接 )、 
visited( 已 访问 的 链接 )、active( 激 活 链 接 )、hover( 鼠 标 停留 在 链接 上 )， 分 别 对 这 4 种 状态 进 
行 定 义 ， 就 完成 了 对 超 链接 样式 的 控制 。 


14.1.1 ai:link 


用 来 定义 超 链接 被 访问 前 的 样式 。 
基本 语法 : 

a:link 

语法 说 明 : 

link 选择 器 不 会 设置 已 经 访问 过 的 链接 的 样式 。 
实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<style> 

a:link 

{ 
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background-color:yellow; 
| 

</style> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<a href="#1"> 公 司 简介 </a> 
<a href="#2"> 公 司 新 闻 </a> 
<a href="#3"> 联 系 我 们 </a> 





</body> 
</html> 
在 浏览 器 中 浏览 ， 可 以 看 到 超 链接 文字 颜色 效果 ， 如 图 14-1 所 示 。 

NE 2 1 

© ES O -< Si 
文件 [F) ”编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 。 帮 动 (H) 
公司 简介 公司 新 闻 联系 我 
成 100% ~ 











14-1 链接 文字 颜色 


14.1.2 a:visited 


aivisited 表示 超 链接 被 访问 过 后 的 样式 , 对 于 浏览 器 而 言 , 通常 都 是 访问 过 的 链接 比 没 
有 访问 过 的 链接 颜色 稍 浅 ， 以 便 提示 浏览 者 该 链接 已 经 被 单 击 过 。 设 置 a:visited 操作 步骤 
如 下 。 

基本 语法 : 

a:visited 

语法 说 明 : 

Visited 选择 器 用 于 选取 已 被 访问 的 链接 。 

实例 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


xstyle> 
a:visited 
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€ 
background-color:yellow; 
} 

</style> 

</head> 

<body> 

<a href="#1"> 公 司 简 介 </a> 
<a href="#2"> 公 司 新 闻 </a> 
<a href="#3"> 联 系 我 们 </a> 
</body> 

</html> 


在 浏览 器 中 浏览 ， 可 以 看 到 单 击 超 链接 文字 颜色 效果 ， 如 图 14-2 所 示 。 








CO file///D:/HTML+DIV. 
公司 简介 公司 条 加 联系 我 们 





图 14-2 ”链接 文字 颜色 


14.1.3 a:active 


a:active 表示 超 链接 的 激活 状态 ， 用 来 定义 鼠标 单 击 链接 但 还 没有 释放 之 前 的 样式 。 设 
置 a:active 操作 步骤 如 下 。 
基本 语法 : 


a:active 


语法 说 明 : 
active 选择 器 用 于 选择 活动 链接 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<style> 

a:active 
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background-color:yellow; 
下 

</style> 

</head> 

<body> 

<a href="#1"> 公 司 简介 </a> 
<a href="#2"> 公 司 新 闻 </a> 
<a href="#3"> 联 系 我 们 </a> 
</body> 

</html> 


在 浏览 器 中 打开 ， 单 击 链接 文字 且 不 释放 鼠标 ， 效 果 如 图 14-3 所 示 。 








号 


C 全 个 日 filey/ 
公司 简介 公司 新 闻 联系 我 们 





图 14-3” 超 链接 效果 


14.1.4 a:hover 


有 时 需要 对 一 个 网 页 中 的 链接 文字 做 不 同 的 效果 ， 并 且 让 鼠标 移 上 时 也 有 不 同 效果 。 
ahover 指 的 是 当 鼠 标 移动 到 链接 上 时 链接 文字 的 样式 。 

基本 语法 : 

a:hover 

语法 说 明 : 

a:hover 选择 器 用 于 选择 鼠标 指针 浮动 在 上 面 的 元 素 。a:hover 选择 器 可 用 于 所 有 元 素 ， 
不 只 是 链接 。 

实例 代码 : 

<!doctype html> 

<html> 


<head> 
<meta charset="utf-8"> 





<style> 
a:hover 
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background-color: #EDF30E; 
} 

</style> 

</head> 

<body> 

<a href="#1"> 公 司 简 介 </a> 
<a href="#2"> 公 司 新 闻 </a> 
<a href="#3"> 联 系 我 们 </a> 
</body> 

</html> 


由 于 设置 了 a:hover 的 背景 颜色 为 算 DF30E, 则 鼠标 指针 经 过 链接 的 时 候 , 会 改变 文本 
的 颜色 ,效果 如 图 14-4 所 示 。 

















014 浊 
< CO file:///D/HTML+ DV 
公司 简介 公 司 郑 间 联系 我 们 





14-4 ”鼠标 指针 经 过 超 链接 时 效果 


14.2 创建 按钮 式 超 链接 


很 多 网 页 上 的 超 链 接 都 制作 成 各 种 按钮 的 效果 ， 当 鼠标 移动 到 按钮 上 时 实现 按 下 去 的 
效果 ， 其 原理 是 变换 边框 之 间 的 颜色 。 下 面 使 用 CSS 制作 一 个 漂亮 的 按钮 链接 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style> 

二 一 

af 

font-family: Arial; 
font-size: .9em; 
text-align:center; 


margin:4px;} 
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a:link, a:visited{ 

color: #A52310; 

padding:4px 10Px 4px 10px; 
background-color: #AAFF76; 
text-decoration: none; 

border-top: 1lpx solid #11F100; 
border-left: 1lpx solid #11F100; 
border-bottom: 1lpx solid #72221; 
border-right: 1lpx solid #72221;} 
a:hover{ 

Color:#831826; 

padding:5px 8px 3px 12px; 
background-color: #F9999B; 

border-top: 1lpx solid #72221; 
border-left: lpx solid #72221; 
border-bottom: lpx solid #11F100; 
border-right: 1lpx solid #11F100;} 

CE 

</style> 

</head> 

<body> 

<a href="#" _fcksavedurl="#"> 首 页 </a> 

<a href="#" fcksavedurl="#"> 公 司 简 介 </a> 
<a href="#" _fcksavedurl="#"> 公 司 新 闻 </a> 
<a href="#" _fcksavedurl="#"> 产 品 欣 赏 </a> 
<a href="#" _fcksavedurl="#"> 联 系 我 们 </a> 
<a href="#" _fcksavedurl="#"> 网 站 论坛 </a> 
</body> 

</html> 


页 面 body 部 分 与 所 有 HTML 页 面 一 样 , 利用 超 链接 建立 最 简单 的 菜单 结构 。 在 <head> 
内 对 <a> 标 签 进行 整体 控制 ,设置 不 同 状态 下 的 样式 , 对 于 鼠标 指针 经 过 时 的 超 链接 ， 相 应 
地 改变 文字 颜色 、 背 景色 、 位 置 和 边框 ， 最 终 显示 效果 如 图 14-5 所 示 。 
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14.3 ”控制 鼠标 指针 


在 许多 网 站 上 我 们 可 以 看 到 很 有 个 性 的 鼠标 指针 (cursor), 在 网 页 设计 中 用 CSS 可 以 方 
便 地 实现 这 种 个 性 鼠标 指针 的 效果 ， 该 CSS 属性 就 是 cursor 属性 。 

一 般 而 言 ， 鼠 标 以 斜 向 上 的 第 头 显示 ， 移 到 文本 上 时 变 为 有 头 的 竖 线 ， 移 到 超 链接 上 
时 变 为 手 形 。 但 用 CSS 可 控制 鼠标 的 显示 效果 , 如 可 使 鼠标 移 到 普通 文本 上 也 显示 成 手 形 。 
cursor 属性 见 表 14-1。 
































表 14-1 cursor 属性 























值 功能 说 明 
url 需 使 用 的 自 定义 光标 的 URL 
default 默认 光标 (通常 是 一 个 箭头 ) 
auto 默认 。 浏 览 器 设置 的 光标 
crosshair 光标 呈现 为 十 字形 
pointer 光标 呈现 为 指示 链接 的 指针 (一 只 手 ) 
move 此 光标 指示 某 对 象 可 被 移动 
e-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 右 移动 
ne-resize 此 光标 指示 矩形 框 的 边缘 可 被 向 上 及 向 右 移 动 
nw-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 上 及 向 左 移动 
n-resize 此 光标 指示 和 矩形 框 的 边缘 可 被 向 上 移动 
se-resize 比 光标 指示 和 矩形 框 的 边缘 可 被 向 下 及 向 右 移动 
sw-resize 比 光标 指示 和 矩形 框 的 边缘 可 被 向 下 及 向 左 移动 
s-resize 比 光标 指示 矩形 框 的 边缘 可 被 向 下 移动 
w-resize 比 光 标 指示 和 拢 形 框 的 边缘 可 被 向 左 移动 
wait 比 光标 指示 程序 正 忙 (通常 是 一 只 表 或 沙漏 ) 
help 比 光标 指示 可 用 的 帮助 (通常 是 一 个 问号 或 一 个 气球 ) 
text 比 光标 指示 文本 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<title> 无 标题 文档 </title> 
<style> 
.Cursorl{cursor:Move} 
</style> 

</head> 

<body class="cursorl"> 


237 仿 





HTML+DIV+CSS 网 页 设计 与 布局 买 用 教程 











1 个 性 鼠标 指针 
l </body> 
， </html> 
l 一 、 y 5 = 二 
1 加 粗 的 代码 是 将 鼠标 设置 为 移动 型 ， 最 终 显示 效果 如 图 14-6 所 示 。 
1 
1 - OO x 
1 € GAMA -| 
1 文件 (篇 坊 (E) 。 坦 看 (V) 收藏 夫 (A) “工具 (帮助 (H) 
1 个 性 卢 标 指 外 8 
1 
1 
1 
1 
1 
1 
1 
1 
山 100% ~ 
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14.4 设置 项 目 列表 样式 


列表 是 一 种 非常 实用 的 数据 排列 方式 ， 它 以 条 列 式 的 模式 来 显示 数据 ， 可 以 帮助 访问 
者 方便 地 找到 所 需 信 息 ， 并 引起 访问 者 对 重要 信息 的 注意 。 
14.4.1 列表 符号 类 型 :liststyle-type 

使 用 列表 符号 属性 可 以 设置 列表 项 所 使 用 的 符号 类 型 。 拥 有 很 多 值 ， 而 且 浏览 器 对 其 
支持 程度 不 一 ， 好 多 效果 在 正 下 是 看 不 到 的 。 

基本 语法 : 

list-style-type: 值 ; 


语法 说 明 : 














列表 符号 有 许多 种 ， 其 具体 取 值 范围 见 表 14-2。 
表 14-2 ”列表 符号 的 取 值 




















默认 值 ， 实 心 圆 











circle 空心 圆 

square 实心 方块 
decimal 阿拉 伯 数 字 
lower-roman 小 写 罗马 数字 








大 写 罗马 数字 


upper-roman 
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续 表 
取 值 含义 
lower-alpha 小 写 英 文字 母 
upper-alpha 大 写 英文 字母 
none 不 使 用 任何 项 目 符号 或 编号 
实例 代码 : 
<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>CcsS 1ist-style-type 属性 示例 </title> 
<style type="text/css" media="all"> 


ul { list-style-type: disc;} 

ul#circle { list-style-type: circle; } 
ul#square { list-style-type: square; } 
ul#decimal { list-style-type: decimal;} 
ul#decimal-leading-zero { list-style-type: 


decimal-leading-zero;} 
ul#lower-roman 
ul#upper-roman{ 
ul#lower-greek 
ul#lower-latin 
ul#upper-latin 


{ list-style-type: lower-roman; } 
list-style-type: upper-roman;} 

{ list-style-type: lower-greek;} 
{ list-style-type: lower-latin; } 
{ list-style-type: upper-latin; } 


ul#armenian { list-style-type: armenian;} 
ul#georgian {list-style-type: georgian;} 
ul#lower-alpha { list-style-type: lower-alpha;} 


ul#upper-alpha { list-style-type: upper-alpha;} 
ul#none { list-style-type: none;} 
ol { list-style-type: lower-roman; } 


</style> 
</head> 
<body> 

<ul> 


<1i> 正 常 模式 </1i> 


</ul> 
<ul id="circle"> 
<1i> 圆 圈 模 式 </1i> 
</ul> 
<ul id="square"> 


<1i> 正 方形 模式 </1i> 


</ul> 
<ul id="decimal"> 
<1i> 数 字模 式 </1i> 
</ul> 


<ul id="lower-roman"> 


<1i> 小 写 罗马 文字 模式 </1i> 


</ul> 
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<ul 


<ul 


<ul 


<ul 





id="upper-roman"> 
<1i> 大 写 罗 马 文字 模式 </1i> 
</ul> 
id="lower-greek"> 
<1i> 小 写 阿 拉 伯 文字 模式 </1i> 
</ul> 
id="lower-latin"> 
<1i> 小 写 拉丁 文 模式 </1i> 
</ul> 
<ul id="upper-latin"> 
<1i> 大 写 拉丁 文 模式 </1i> 
</ul> 
<ul id="armenian"> 
<1i> 亚 美 尼 亚 数 字模 式 </1i> 
</ul> 
id="georgian"> 
<1i> 乔 治 亚 数 字模 式 </1i> 
</ul> 
<ul id="lower-alpha"> 
<1i> 小 写 拉丁 文 模式 </1i> 
</ul> 
<ul id="upper-alpha"> 
<1i> 大 写 拉丁 文 模式 </1i> 
</ul> 
<ul id="none"> 
<1i> 无 模式 </1i> 
<1i></1i> 
</ul> 


</body> 
</html> 


加 粗 部 分 的 代码 是 设置 列表 符号 类 型 ， 如 图 14-7 所 示 。 
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14.4.2 ”列表 符号 的 混 


在 定义 列表 元 素 的 时 候 ， 有 时 候 会 混用 各 种 列表 符号 。 当 混用 的 列表 符号 中 遇 到 顺序 
问题 的 时 候 ， 同 一 列表 中 会 计算 所 有 列表 项 目的 数目 ， 确 定 当 前 列表 项 目的 显示 方式 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 列 表 符 号 的 混用 </title> 

<style> 
.liststylel{list-style-type:disc;} 
.liststyle2{list-style-type:circle;} 
.liststyle3{list-style-type:decimal;} 
.liststyle4{list-style-type:lower-roman;} 
li{font-size:36px;} 

</style> 

</head> 

<body> 

<ul> 

<li class="1iststylel"> 列 表 符 号 的 混用 </1i> 
<1li class="1iststyle2"> 列 表 符 号 的 混用 </1i> 
<1li class="1iststyle3"> 列 表 符 号 的 混用 </1i> 
<1li class="1liststyle4"> 列 表 符 号 的 混用 </1i> 
</ul> 

</body> 

</html> 


加 粗 部 分 的 代码 表示 在 <ul> 标 签 的 每 个 列表 项 目 中 ， 使 用 了 不 同 的 列表 符号 属性 值 ， 
同时 定义 了 <li> 元 素 中 文本 的 大 小 ， 如 图 14-8 所 示 。 








- -Ea 
rp- C | 后 二 3%RR 
HD MAE EBV tmxN IRM Ha) 


“列表 符号 的 混用 
。 列 表 符 号 的 混用 
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14.4.3 ”列表 图 像 属 性 : list-style-image 


除了 传统 的 各 种 项 目 符号 外 ，CSS 还 提供 了 属性 list-style-image， 可 以 将 项 目 符号 显示 
为 任意 的 图 片 。 

基本 语法 : 

list-style-image:none | url (图 像 地 址 ) ; 

语法 说 明 : 

在 列表 图 像 属 性 中 ， 可 以 使 用 两 个 属性 值 : none 和 URL。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<style type="text/css" media="all"> 
ul { list-style-image: url(1.jpg);} 
</style> 

</head> 

<body> 

<ul> 

<1i> 使 用 图 片 显示 列表 </1i> 

<1i> 使 用 图 片 显 示 列 表 </1i> 

<1i> 使 用 图 片 显示 列表 </1i> 

<1i> 使 用 图 片 显示 列表 </1i> 

</ul> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 图 像 为 项 目 符号 ， 效 果 如 图 14-9 所 示 。 
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14.4.4 列表 综合 属性 : list-style 





列表 综合 属性 (list-style)， 




















用 来 统一 定义 列表 的 各 种 显示 效果 。 在 列表 综合 属性 中 ， 可 


以 同时 定义 列表 的 标签 位 置 、 使 用 的 图 片 、 列 表 符 号 等 属性 。 


基本 语法 : 


list-style:list-style-image | list-style-position | list-style-type 


语法 说 明 : 


当 list-style-image 和 list-style-type 都 被 指定 的 时 候 ，list-style-image 将 优先 ， 除 非 
list-style-image 设置 为 none 或 指定 URL 地 址 的 图 片 不 能 被 显示 。 


实例 代码 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css" media="all"> 

ul#testl{ list-style:square inside url(2.jpg);} 
ul#test2{ list-style:none;} 


</style> 
</head> 

<body> 

<ul id="test1"> 


<1i>list-style 示例 </1i> 
<1i>1list-style 示例 </1i> 
<1i>list-style 示例 </1i> 
<1i>list-style 示例 </1i> 


</ul> 
</body> 
</html> 


加 粗 部 分 的 代码 是 用 来 设置 列表 复合 属性 ， 效 果 如 图 14-10 所 示 。 


文件 月 ” 锯 灌 E 二 看 V) 


- 0 x 


ET p - © S rmx 
让 三 天 人) 工具 TT 帮助 H) 





© list-style 示 例 


lst-style 例 
lst-style 示 例 


lst-style 示 例 
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14.5 创建 简单 的 导航 菜单 


网 站 导航 都 含有 超 链 接 ， 因 此 ， 一 个 完整 的 网 站 导航 需要 创建 超 链 接 样式 。 导 航 栏 就 
好 像 一 本 书 的 目录 ， 对 整个 网 站 有 着 很 重要 的 作用 。 


14.5.1 ”简单 的 竖 直 排列 菜单 


作为 一 个 成 功 的 网 站 ， 导 航 菜单 是 不 可 缺少 的 。 在 传统 的 方式 下 制作 导航 菜单 是 很 麻 
烦 的 工作 。 使 用 <ul> 标 签 、<li> 标 签 以 及 CSS 属性 变换 可 以 达到 很 多 意 想不到 的 导航 效果 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<style> 

#button { 

width: 150px; // 设置 整个 div 的 宽度 为 150px 像素 
border-right: lpx solid #000; 

padding: 0 0 lem 0; 

margin-bottom: lem; 

font-family: "黑体 "; // 设置 文字 字体 
font-size: 13px; // 设置 文字 字号 
background-color: #FF0099; 

color: #000000;} 

#button ul { 

list-style: none; // 不 带 项 目 符号 显示 
margin: 0; // 设置 外 边 距 

padding: 0; // 设置 内 边 距 

border: none;} 

#button 1i { 

margin: 0; 

border-bottom-width: lpx; 
border-bottom-style: solid; 
border-bottom-color: #000000;} 

#button li a { 

display: block; // 通过 该 语句 ， 超 链接 被 设置 成 了 块 元 素 ， 当 鼠标 指针 进入 该 块 的 任何 部 分 
// 时 都 会 被 激活 ， 而 不 是 仅仅 在 文字 上 时 才 被 激活 。 
padding: 5px 5px 5px 0.5em; 
background-color: #A2D30C; 

color: #fff; 

text-decoration: none; 

width: 100%; 
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border-right-width: 10px; 
border-left-width: 10px; 
border-right-style: solid; 
border-left-style: solid; 
border-right-color: #034A0B; 
border-left-color: #034A0B;} 
html>body #button 11 af{ 

width: auto;} 

#button 1i a:hover { // 鼠标 指针 经 过 时 
background-color: #034R0B; // 改变 背景 色 
color: #fff;  // 改变 文字 颜色 
border-right-width: 1l0px; 
border-left-width: 10px; 
border-right-style: solid; 
border-left-style: solid; 
border-right-color: #85FF8F; 
border-left-color: #85FF8F;} 
</style> 

</head> 

<body> 

<div id="button"> 

<ul> 

<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 公 司 新 闻 </a></1i> 
<1i><a href="#"> 最 新 动态 </a></1i> 
<1i><a href="#"> 客 房 介 绍 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 

</div> 

</body> 

</html> 


<body> 部 分 建立 了 HTML 网 页 的 基本 结构 , 将 导航 菜单 的 各 个 项 目 列表 用 <ul> 列 出 来 ， 
CSS 部 分 的 代码 是 设置 导航 的 外 观 效果 ， 效 果 如 图 14-11 所 示 。 














二 “ 沂 
ES P+ © | @ tmx. | 

文 作 们 。 疙 各 E)。 坦 看 (收藏 关 A) 工具 (帮助 (H 
R100% > 





14-11 设置 导航 效果 


245 多 





HTML+DIV+CSS 网 页 设计 与 布局 买 用 教程 








14.5.2 ”横竖 自由 转换 导航 菜单 








实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<style> 

body {background-color: ffdee0;} 


导航 菜单 不 只 是 可 以 竖 直 排列 ， 很 多 时 候 要 求 页 面 的 导航 菜单 能 够 水 平方 向 显示 。 通 
过 CSS 属性 的 控制 ， 可 以 使 项 目 列表 的 导航 菜单 轻松 地 实现 横竖 转换 。 





#navigation{font-family:Arial, Helvetica, sans-serif;} 


#navigation ul{ 
list-style-type:none; /* 不 显示 项 目 符号 */ 
margin:0px; 

padding:0px;} 

#navigation 1i { 

float:left; /* 水 平 显示 各 个 项 目 */} 
#navigation 1i af 

display:block; /* 区 块 显示 */ 
padding:3px 6px 3px 6px; 
text-decoration:none; 
border:1px solid #711515; 
margin:2px;} 


#navigation 1i a:link, #navigation 1i a:visited{ 


background-color:#cl1136; color:#FFFFFF;} 
#navigation 1i a:hover{ /* 鼠标 经 过 时 */ 
background-color:#990020; /* 改变 背景 色 */ 
color:#ffff00; /* 改变 文字 颜色 */} 
</style> 

</head> 

<body> 

<div id="navigation"> 

<ul> 

<1i><a href="#"> 首 页 </a></1i> 

<1i><a href="#"> 我 的 简介 </a></1i> 

<1i><a href="#"> 我 的 相册 </a></1i> 

<1i><a href="#"> 我 的 博客 </a></1i> 

<1i><a href="#"> 联 系 我 </a></1i> 

</ul> 

</div> 

</body> 


加 粗 代码 中 ， 在 #avigation li 的 样式 中 ， 增 加 一 条 “float:left”， 也 就 是 使 各 个 列表 项 














变 为 向 左 浮动 ， 这 样 它们 就 会 依次 排列 ， 直 到 浏览 器 窗 
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容纳 不 下 ， 再 折 行 排列 ， 也 就 使 


MN 1'4B 才 css anEaaasmasm 
ITILLLL 





如 图 14-12 所 示 效 果 。 
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图 14-12 设置 导航 自由 转换 


本 章 小 结 


在 一 个 网 站 中 ， 所 有 页 面 都 会 通过 超 链接 互相 连接 在 一 起 ， 这 样 才 会 形成 一 个 有 机 的 
网 站 。 因 此 在 各 种 网 站 中 ， 导 航 都 是 网 页 中 最 重要 的 组 成 部 分 之 一 。 本 章 主 要 介绍 了 超 链 
接 文本 的 样式 设计 ， 以 及 对 列表 的 样式 设计 。 对 于 超 链接 ， 最 核心 的 是 4 种 类 型 的 含义 和 
用 法 : 对 于 列表 ， 需 要 了 解 基 本 的 设置 方法 。 这 二 者 都 是 非常 重要 和 常用 的 元 素 ， 因 此 一 
定 要 把 相关 的 基本 要 点 熟练 掌握 ， 为 后 面 制 作 复 杂 的 例子 打 好 基础 。 


练 习 题 








1. 填空 题 
(1) 表示 超 链接 被 访问 过 后 的 样式 ， 对 于 浏览 器 而 言 ， 通 常 都 是 访问 过 的 链接 
比 没有 访问 过 的 链接 颜色 稍 浅 ， 以 提示 浏览 者 该 链接 已 经 被 单 击 过 。 
(O) 表示 超 链接 的 激活 状态 , 用 来 定义 鼠标 单 击 链接 但 还 没有 释放 之 前 的 样式 。 
(3) CSS 提供 了 4 种 a 对 象 的 伪 类 ， 它 表示 链接 的 4 种 不 同 状态 ， 即 (未 访问 的 
链接 )、 (已 访问 的 链接 )、 (激活 链接 )、 (鼠标 停留 在 链接 上 )， 分 别 
对 这 4 种 状态 进行 定义 ， 就 完成 了 对 超 链 接 样 式 的 控制 。 
(4) 链接 标签 虽然 在 网 站 设计 制作 中 占有 不 可 替代 的 地 位 ， 但 是 其 标签 只 有 一 个 ， 那 
就 是  _ 标签， 下面 是 CSS 定义 超 链接 的 4 个 状态 。 
: 设置 未 访问 的 链接 样式 属性 。 
: 设置 被 选择 (被 按 下 ) 的 链接 样式 属性 。 
: 设置 已 访问 的 链接 样式 属性 。 


: 设置 当 有 鼠标 悬 停 在 链接 上 的 样式 属性 。 


2. 操作 题 
设计 一 个 背景 变换 的 导航 菜单 。 
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【学 习 目 标 】 

设计 网 页 的 第 一 步 是 设计 布局 ， 好 的 网 页 布局 会 令 访问 者 耳目 一 新 ， 同 样 也 可 以 使 访 
问 者 比较 容易 在 站 点 上 找到 他 们 所 需要 的 信息 。 无 论 使 用 表格 还 是 CSS， 网 页 布局 都 是 把 
大 块 的 内 容 放 进 网 页 的 不 同 区 域 里 面 ,有 了 CSS, 最 常用 来 布局 内 容 的 元 素 就 是 <div> 标 签 。 
盒子 模型 是 CSS 控制 页 面 时 一 个 很 重要 的 概念 ， 只 有 很 好 地 掌握 了 盒子 模型 以 及 其 中 每 个 
元 素 的 用 法 ， 才 能 真正 控制 好 页 面 中 的 各 个 元 素 。 

本 章 主要 内 容 包括 : 

(1) 了 解 什么 是 Web 标准 ; 

(2) 为 什么 要 建立 Web 标准; 

(3) <div> 与 <span> 的 区 别 。 


15.1 网 站 与 Web 标准 


Web 标准 ， 即 网 站 标准 。 目 前 通常 所 说 的 Web 标准 一 般 指 网 站 建设 采用 基于 XHTML 
语言 的 网 站 设计 语言 ，Web 标准 中 典型 的 应 用 模式 是 CSS+DIV。 实 际 上 ，Web 标准 并 不 是 
某 一 个 标准 ， 而 是 一 系列 标准 的 集合 。 


15.1.1 什么 是 Web 标准 


Web 标准 是 由 W3C 和 其 他 标准 化 组 织 制定 的 一 套 规范 集合 ，Web 标准 的 目的 在 于 创 
建 一 个 统一 的 用 于 Web 表现 层 的 技术 标准 , 以 便于 通过 不 同 浏览 器 或 终端 设备 向 最 终 用 户 
展示 信息 内 容 。 

网 页 主要 由 3 部 分 组 成 : 结构 (Structure)、 表 现 (Presentation) 和 行为 (Behavior)。 对 应 的 
网 站 标准 也 分 3 方面 : 结构 化 标准 语言 ， 主 要 包括 XHTML 和 XML; 表现 标准 语言 ， 主 要 
包括 CSS; 行为 标准 ， 主 要 包括 对 象 模型 (如 W3C DOM)、ECMAScript 等 。 














1. 结构 

结构 对 网 页 中 用 到 的 信息 进行 分 类 与 整理 。 在 结构 中 用 到 的 技术 主要 包括 HTML、 
XML 和 XHTML。 

2. 表现 

表现 用 于 对 信息 进行 版 式 、 颜色 、 大 小 等 形式 控制 。 在 表现 中 用 到 的 技术 主要 是 CSS。 











| 第 15 音 “Css+DIv 布局 定位 基础 
HE， 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 人 
3. 行为 
行为 是 指 文档 内 部 的 模型 定义 及 交互 行为 的 编写 ， 用 于 编写 交互 式 的 文档 。 在 行为 中 
用 到 的 技术 主要 包括 DOM(Document Object Model) 和 ECMAScript。 
(1) DOM 文档 对 象 模型 。DOM 是 浏览 器 与 内 容 结构 之 间 沟 通 接口 ， 使 你 可 以 访问 页 
面 上 的 标准 组 件 。 
(2) ECMAScript 脚本 语言 。ECMAScript 是 标准 脚本 语言 ， 用 于 实现 具体 的 界面 上 对 
象 的 交互 操作 。 


15.1.2 ”为 什么 要 建立 Web 标准 


我 们 大 部 分 人 都 有 深刻 体验 ， 每 当主 流 浏 览 器 版 本 升级 时 ， 我 们 刚 建 立 的 网 站 就 可 能 
变 得 过 时 ， 就 需要 升级 或 者 重新 设计 网 站 。 在 网 页 制作 时 采用 Web 标准 技术 ， 可 以 有 效 地 
对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 相应 的 代码 做 
一 些 简单 的 修改 ， 就 可 以 改变 网 页 的 外 观 和 格式 。 

简单 说 ， 网 站 标准 的 目的 就 是 : 

@ ”提供 最 多 利益 给 最 多 的 网 站 用 户 ; 
确保 任何 网 站 文档 都 能 够 长 期 有 效 ; 
简化 代码 ， 降 低 建设 成 本 ; 

让 网 站 更 容易 使 用 ， 能 适应 更 多 不 同 用 户 和 更 多 网 络 设备 ; 
当 浏览 器 版 本 更 新 ， 或 者 出 现 新 的 网 络 交互 设备 时 ， 确 保 所 有 应 用 能 够 继续 正确 
执行 。 

对 于 网 站 设计 和 开发 人 员 来 说 ， 网 站 标准 就 是 使 用 标准 ， 对 于 网 站 用 户 来 说 ， 网 站 标 
准 就 是 最 佳 体验 。 

对 网 站 浏览 者 的 好 处 : 

@ ”文件 下 载 与 页 面 显示 速度 更 快 ; 

@ ”内 容 能 被 更 多 的 用 户 所 访问 (包括 失明 、 视 弱 、 色 盲 等 残障 人 士 ); 

@ ”内 容 能 被 更 广泛 的 设备 所 访问 (包括 屏幕 阅读 机 、 手持 设备 、 搜索 机 器 人 、 打印 机 、 

电 冰 箱 等 ); 

@ ”用 户 能 够 通过 样式 选择 定制 自己 的 表现 界面 ; 

@ ”所 有 页 面 都 能 提供 适 于 打印 的 版 本 。 

对 网 站 设计 者 的 好 处 : 

更 少 的 代码 和 组 件 ， 容 易 维 护 ; 

带宽 要 求 降低 ， 代 码 更 简洁 ， 成 本 降低 ; 

更 容易 被 搜索 引擎 搜索 到 ; 

改版 方便 ， 不 需要 变动 页 面 内 容 ; 

提供 打印 版 本 而 不 需要 复制 内 容 ; 

提高 网 站 易 用 性 。 在 美国 ， 有 严格 的 法 律 条 款 来 约束 政府 网 站 必须 达到 一 定 的 易 
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用 性 ， 其 他 国家 也 有 类 似 的 要 求 。 


15.1.3 ”怎样 改善 现 有 网 站 


大 部 分 的 设计 师 依旧 在 采用 传统 的 表格 布局 、 表 现 与 结构 混杂 在 一 起 的 方式 来 建立 网 
站 。 学 习 使 用 XHTML+CSS 的 方法 需要 一 个 过 程 ， 使 现 有 网 站 符合 网 站 标准 也 不 可 能 一 步 
到 位 。 最 好 的 方法 是 循序 渐进 ， 分 阶段 来 逐步 达到 完全 符合 网 站 标准 的 目标 。 

1. 初级 改善 

(1) 为 页 面 添加 正确 的 DOCTYPE。DOCTYPE 是 document type 的 简写 。 用 来 说 明 用 
的 XHTML 或 者 HTML 是 什么 版 本 。 浏 览 器 根据 DOCTYPE 定义 的 DTD( 文 档 类 型 定义 ) 
来 解释 页 面 代码 。 

(2) 设 定 一 个 名 字 空间 。 直 接 在 DOCTYPE 声明 后 面 添加 如 下 代码 : 

<!doctype html> 

(3) 声明 编码 语言 。 为 了 被 浏览 器 正确 解释 和 通过 标识 校 验 ， 所 有 的 XHTML 文档 都 
必须 声明 它们 所 使 用 的 编码 语言 ， 代 码 如 下 : 

<meta charset="utf-8"> 

这 里 声明 的 编码 语言 是 utf-8。 

(4) 用 小 写字 母 书写 所 有 的 标签 。 XML 对 大 小 写 是 敏感 的 ， 所 以 ， XHTML 也 是 区 分 
大 小 写 。 所 有 的 XHTML 标签 和 属性 的 名 字 都 必须 使 用 小 写 。 否 则 文档 将 被 W3C 校 验 认 
为 是 无 效 的 。 例 如 下 面 的 代码 是 不 正确 的 : 

<Title> 公 司 简介 </Title> 

正确 的 写法 是 : 

<title> 公 司 简介 </title> 

(5) 为 图 片 添加 alt 属性。 为 所 有 图 片 添加 alt 属性 。alt 属性 指定 了 当 图 片 不 能 显示 的 
时 候 就 显示 的 替代 文本 ， 这 样 做 对 正常 用 户 虽 可 有 可 无 ， 但 对 纯 文本 浏览 器 和 使 用 屏幕 阅 
读 机 的 用 户 来 说 是 至 关 重 要 的 。 只 有 添加 了 alt 属性 ， 代 码 才 会 被 W3C 正确 校 验 通过 。 
如 下 所 示 : 
<img src="logo.gif" alt=" 东 方 公司 标志 ， 首 页 "> 
(6) 给 所 有 属性 值 加 引号 。 在 HIML 中 , 可 以 不 需要 给 属性 值 加 引号 , 但 是 在 XHTML 
它们 必须 被 加 引号 。 
例如 height="100" 是 正确 的 ， 而 height=100 就 是 错误 的 。 

(7) 关闭 所 有 的 标签 。 在 XHTML 中 ， 每 一 个 打开 的 标签 都 必须 关闭 ， 如 下 所 示 : 


<p> 每 一 个 打开 的 标签 都 必须 关闭 。</p> 
<b>HTML 可 以 接受 不 关闭 的 标签 ，XHTML 就 不 可 以 。</b> 


bp 250 






































由 








(UU 第 15 章 CSS+DIV 布局 定位 基础 


这 个 规则 可 以 避免 HTML 的 混乱 和 麻烦 。 

2. 中 级 改善 

接 下 来 的 改善 主要 在 结构 和 表现 分 离 上 ， 这 一 步 不 像 初 级 改善 那么 容易 实现 ， 需 要 观 
念 上 的 转变 ， 以 及 对 CSS 技术 的 学 习 和 运用 。 

(1) 用 CSS 定义 元 素 外 观 。 应 该 使 用 CSS 来 确定 元 素 的 外 观 。 

(2) 用 结构 化 标签 代替 无 意义 的 垃圾 代码 。 许 多 人 可 能 从 来 都 不 知道 HTML 和 
XHTML 标签 设计 本 意 是 用 来 表达 结构 的 。 很 多 人 已 经 习惯 用 标签 来 控制 表现 而 不 是 结构 。 
例如 下 面 的 代码 : 

北京 <br/> 上 海 <pr/> 广 州 <br/> 

就 没有 如 下 的 代码 好 : 

<ul> <1i> 北 京 </1i> <1i> 上 海 </1i> <1i> 广 州 </1i></ul> 

(3) 给 每 个 表格 和 表单 加 上 id。 给 表格 或 表单 赋予 一 个 唯一 的 、 结 构 的 标签 ， 例 如 : 


<table id="menu"> 




















15.2 <div> 标签 与 <span> 标 签 


在 CSS 布局 的 网 页 中 ，<div> 与 <span> 都 是 常用 的 标签 ， 利 用 这 两 个 标签 ， 加 上 CSS 
对 其 样式 的 控制 ， 可 以 很 方便 地 实现 网 页 的 布局 。 


15.2.1 ” <div> 概述 


过 去 最 常用 的 网 页 布局 工具 是 <table> 标 签 , 它 本 是 用 来 创建 电子 数据 表 的 , 由 于 <table> 
标签 本 来 不 是 要 用 于 布局 的 ， 因 此 设计 师 们 不 得 不 经 常 以 各 种 不 寻常 的 方式 来 使 用 这 个 标 
签 ， 如 把 一 个 表格 放 在 另 一 个 表格 的 单元 格 里 面 。 这 种 方法 的 工作 量 很 大 ， 增 加 了 大 量 额 
外 的 HTML 代码 ， 并 使 得 后 面 要 修改 设计 很 难 。 

而 CSS 的 出 现 使 得 网 页 布局 有 了 新 的 曙光 。 利用 CSS 属性 , 可 以 精确 地 设 定 元 素 的 位 
置 ， 还 能 将 定位 的 元 素 登 放 在 彼此 之 上 。 当 使 用 CSS 布局 时 ， 主 要 把 它 用 在 <div> 标 签 上 ， 
<div> 与 </div> 之 间 相 当 于 一 个 容器 ， 可 以 放置 段落 、 表 格 、 图 片 等 各 种 HTML 元 素 。 

<div> 是 用 来 为 HIML 文档 内 大 块 的 内 容 提供 结构 和 背景 的 元 素 。div 的 起 始 标签 和 结 
束 标签 之 间 的 所 有 内 容 都 是 用 来 构成 这 个 块 的 ， 其 中 所 包含 元 素 的 特性 由 <div> 标 签 的 属 
性 ， 或 通过 使 用 CSS 来 控制 。 

下 面 列 出 一 个 简单 的 实例 讲述 <div> 的 使 用 。 

实例 代码 : 


<!ldoctype html> 
<html> 
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15.2.2 <div> 与 <span> 的 区 别 


<span> 是 用 
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<head> 
<meta charset="utf-8"> 
<title>Div 的 简单 使 用 </title> 
<style type="text/css"> 
A 
divt{ 
font-size:26px; 
font-weight:bold; 
font-family:Arial; 
color:#330000; 


background-color: #D8DDO1; 


text-align:center; 
width:400px; 
height:80px; 

} 

--> 

</style> 

</head> 

<body> 
<qdiv>div 的 使 用 </div> 

</body> 

</html> 


7 
/* 字体 粗细 */ 
/字体 泪 / 

/* 颜色 */ 
/* 背景 颜色 */ 
Due 
/* 块 宽度 */ 
/* 块 高 度 */ 


在 上 面 的 实例 中 ， 通 过 CSS 对 div 的 控制 ， 制 作 了 一 个 宽 400px 和 高 80px 的 绿色 块 ， 
并 设置 了 文字 的 颜色 、 字 号 和 对 齐 方式 ， 在 正 中 浏览 效果 如 图 15-1 所 示 。 








一 也 x 
局 EEEEEREE3ET oO - ¢ | & ov 
文件 F) ” 编 锅 (E) 得 看 (V) 收藏 交 (A) 工具 (T) 。 帮 动 (H) 
div 的 使 用 
息 100% 
图 15-1 Div 的 简单 使 用 


很 多 开发 人 员 都 把 <div> 标 签 同 <span> 标 签 弄 混淆 了 。 尽 管 它们 在 特性 上 相同 ， 但 是 





来 定义 内 顽 内 容 而 不 是 大 块 内 容 的 。 


<div> 是 一 个 块 级 元 素 ， 可 以 包含 段落 、 标 题 、 表 格 ， 甚 至 如 章节 、 摘 要 和 备注 等 。 而 
<span> 是 行内 元 素 ，<span> 的 前 后 是 不 会 换行 的 ， 它 没有 结构 的 意义 ， 纯 粹 是 应 用 样式 ， 
当 其 他 行内 元 素 都 不 合适 时 ， 可 以 使 用 <span>。 
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下 面 通过 一 个 实例 来 说 明 <div> 与 <span> 的 区 别 。 
实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>div 与 span 的 区 别 </title> 
</head> 
<body> 
<p>div 标记 不 同行 : </p> 
<div><img src="2.jpg" width="180" height="240" vspace="1" 
border="0"></div> 
<div><img src="3.jpg" width="174" height="240" vspace="1" border="0"></div> 
<div><img src="4.jpg" width="174" height="240" vspace="1" border="0"></div> 
<p>span 标记 同一 行 : </p> 
<span><img src="2.jpg" width="174"” height="240" border="0"></span> 
<span><img src="3.jpg" width="174" height="240" 
<span><img src="4.jpg" width="174" height="240" border="0"></span> 
</body> 
</html> 


在 浏览 器 中 浏览 ， 效 果 如 图 15-2 所 示 。 








ISEPEXL ELY 
图 15-2 Div 与 Span 的 区 别 
正 是 由 于 两 个 对 象 不 同 的 显示 模式 ， 因 此 在 实际 使 用 过 程 中 决定 了 两 个 对 象 的 不 同 用 
途 。<div> 对 象 是 一 个 大 的 块 状 内 容 ， 如 一 大 段 文本 、 一 个 导航 区 域 、 一 个 页 脚 区 域 等 显示 
为 块 状 的 内 容 。 
而 作为 内 联 对 象 的 <span>， 其 用 途 是 对 行内 元 素 进 行 结构 编码 以 方便 样式 设计 ， 例 如 
在 一 大 段 文 本 中 ， 需 要 改变 其 中 一 段 文本 的 颜色 ， 可 以 对 这 一 小 部 分 文本 使 用 <span> 对 象 
并 进行 样式 设计 ， 这 将 不 会 改变 这 一 整 段 文本 的 显示 方式 。 
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本 章 小 结 


随 着 Web 2.0 大 潮 的 席卷 而 来 , 传统 的 表格 布局 模式 逐渐 被 DIV+CSS 的 设计 模式 所 取 
代 , 使 用 DIV 建 框架 ,使 用 CSS 定制 、 改 善 网 页 的 显示 效果 已 经 成 为 一 个 网 页 设计 的 标准 
化 模式 ， 对 于 网 页 设计 人 员 来 说 ，DIV+CSS 已 经 成 为 他 们 必须 掌握 的 技术 。 本 节 主 要 讲述 
了 Web 标准 的 概念 、 网 站 与 Web 标准 以 及 <div> 标 签 与 <span> 标 签 的 基本 应 用 。 








练 习 题 

1. 填空 题 

(1) 网 页 主要 由 3 部 分 组 成 : 结构 、 表 现 和 行为 。 对 应 的 网 站 标准 也 分 3 方面 : 结构 
化 标准 语言 ， 主 要 包括 和 ; 表现 标准 语言 ， 主 要 包括 
行为 标准 ， 主 要 包括 对 象 模型 (如 W3C DOM)、ECMAScript 等 。 

(2) 在 CSS 布局 的 网 页 中 ， 与 都 是 常用 的 标签 , 利用 这 两 个 标签 ， 
加 上 CSS 对 其 样式 的 控制 ， 可 以 很 方便 地 实现 网 页 的 布局 。 

2. 简 答题 


为 什么 要 建立 Web 标准 ? 
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【学 习 目 标 】 

盒子 模型 是 CSS 控制 页 面 时 一 个 很 重要 的 概念 。 只 有 很 好 地 掌握 了 盒子 模型 以 及 其 中 
每 个 元 素 的 用 法 ， 才 能 真正 地 控制 好 页 面 中 的 各 个 元 素 。 一 个 页 面 由 很 多 这 样 的 盒子 组 成 ， 
这 些 盒 子 之 间 会 互相 影响 。CSS 盒子 模型 本 质 上 是 一 个 盒子 ， 封 装 周围 的 HTML 元素 ， 它 
包括 边 距 、 边 框 、 填 充 和 实际 内 容 。 盒 子 模 型 允许 我 们 在 其 他 元 素 和 周围 元 素 边框 之 间 的 
空间 放置 元 素 。 

本 章 主 要 内 容 包 括 : 

(1) 盒子 与 模型 的 概念 ; 

(2) 边框 border; 

(3) 设置 内 边 距 padding; 

(4) 设置 外 边 距 margin; 

(5) 掌握 盒子 的 浮动 与 定位 。 


16.1 “盒子 ”与 “模型 ”的 概念 


在 网 页 布局 中 ， 为 了 能 够 在 纷繁 复杂 的 各 个 部 分 合理 地 进行 组 织 ， 这 个 领域 的 一 些 有 
识 之 士 对 它 的 本 质 进 行 充分 研究 后 ， 总 结 了 一 套 完整 的 、 行 之 有 效 的 原则 和 规范 ， 这 就 是 
“盒子 模型 ”。 

所 有 页 面 中 的 元 素 都 可 以 看 成 一 个 盒子 ， 占 据 着 一 定 的 页 面 空间 。 一 般 来 说 ， 这 些 被 
占据 的 空间 往往 都 要 比 单纯 的 内 容 大 。 换 名 话说， 可 以 通过 调整 盒子 的 边框 和 距离 等 参数 ， 
来 调节 盒子 的 位 置 和 大 小 。 如 图 16-1 所 示 ， 在 CSS 中 一 个 独立 的 盒子 模型 由 content( 内 容 
区 )、padding( 内 边 距 )、border( 边 框 ) 和 margin( 外 边 距 )4 部 分 组 成 。 
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1. 内 容 区 

内 容 区 是 盒子 模型 的 中 心 ， 它 呈现 了 盒子 的 主要 信息 内 容 ， 这 些 内 容 可 以 是 文本 、 图 
片 等 多 种 类 型 。 内 容 区 是 盒子 模型 必 备 的 组 成 部 分 ， 其 他 的 3 部 分 都 是 可 选 的 。 内 容 区 有 
3 个 属性 : width、height 和 overflow。 使 用 width 和 height 属性 可 以 指定 盒子 内 容 区 的 高 度 
和 宽度 ， 其 值 可 以 是 长 度 值 或 百分比 值 。 

当 内 容 信息 太 多 ， 超 出 内 容 区 所 占 范围 时 ， 可 以 使 用 overflow 溢出 属性 来 指定 处 理 方 
法 。 当 overflow 属性 值 为 hidden 时 ， 滋 出 部 分 将 不 可 见 ; 为 visible 时 ,溢出 的 内 容 信息 可 
见 ， 只 是 被 呈现 在 盒子 的 外 部 ; 当 为 scroll 时 ， 滚 动 条 将 被 自动 添加 到 盒子 中 ， 用 户 可 以 
通过 滚动 显示 内 容 信息 ; 当 为 auto 时 ， 将 由 浏览 器 决定 如 何 处 理 溢出 部 分 。 

2. 内 边 距 

内 边 距 是 内 容 区 和 边框 之 间 的 空间 ， 可 以 看 作 是 内 容 区 的 背景 区 域 。 内 边 距 的 属性 有 
5 种 ， 即 padding-top、padding-bottom、padding-left、padding-right 以 及 综合 了 以 上 4 种 方 
向 的 快捷 内 边 距 属性 padding。 使 用 这 5 种 属性 可 以 指定 内 容 区 与 各 方向 边框 间 的 距离 。 同 
时 通过 对 盒子 背景 色 属 性 的 设置 可 以 使 内 边 距 部 分 呈现 相应 的 颜色 ， 起 到 一 定 的 边线 效果 。 














3. 边框 
边框 的 属性 有 border-style、border-width、border-color 以 及 综合 了 以 上 3 类 属性 的 快捷 
边框 属性 border。 


边框 样式 属性 border-style 是 边框 最 重要 的 属性 , CSS 规定 了 dotted、 solid 等 边框 样式 。 
使 用 边框 宽度 属性 border-width 可 以 为 边框 指定 具体 的 厚度 ， 其 属性 值 可 以 是 长 度 计量 值 ， 
也 可 以 是 CSS 规定 的 thin、medium 和 thick。 使 用 边框 颜色 属性 可 以 为 边框 指定 相应 的 颜 
色 ， 其 属性 值 可 以 是 RGB 值 ， 也 可 以 是 CSS 规定 的 颜色 名 。 


4. 外 边 距 


外 边 距 位 于 盒子 的 最 外 围 ， 它 不 是 一 条 边线 而 是 添加 在 边框 外 面 的 空间 。 外 边 距 使 元 
素 盒子 之 间 不 必 紧 凑 地 连接 在 一 起 ， 是 CSS 布局 的 一 个 重要 手段 。 外 边 距 的 属性 有 5 种 ， 
即 margin-top、margin-bottom、margin-left、margin-right 以 及 综合 了 以 上 4 种 方向 的 快捷 外 
边 距 属性 margin， 其 具体 的 设置 和 使 用 与 内 边 距 属 性 类 似 。 
同时 ，CSS 允许 给 外 边 距 属性 指定 负数 值 ， 当 指定 负 外 边 距 值 时 ， 整 个 盒子 将 向 指定 
负 值 方向 的 相反 方向 移动 ， 以 此 可 以 产生 盒子 的 重 双 效果。 采用 指定 外 边 距 正 负 值 的 方法 
可 以 移动 网 页 中 的 元 素 ， 这 是 CSS 布局 技术 中 的 一 个 重要 方法 。 

盒子 模型 的 概念 : 所 有 页 面 中 的 元 素 都 可 以 看 作 一 个 装 了 东西 的 盒子 ， 盒 子 里 面 的 内 
容 到 盒子 的 边框 之 间 的 距离 即 填充 (padding)， 盒 子 本 身 有 边框 (bordeD， 而 盒子 边框 外 和 其 
他 盒子 之 间 ， 还 有 边界 (margin)。 

一 个 盒子 由 4 个 独立 部 分 组 成 ， 如 图 16-2 所 示 。 
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最 外 面 的 是 边界 (margin)。 

第 二 部 分 是 边框 (border), 边框 可 以 有 不 同 的 样式 。 

第 三 部 分 是 填充 (padding), 填充 用 来 定义 内 容 区 域 
与 边框 (border) 之 间 的 空白 。 

第 四 部 分 是 内 容 区 域 。 

填充 、 边 框 和 边界 都 分 为 “上 、 右 、 下 、 左 ”4 个 
方向 ， 既 可 以 分 别 定义 ， 也 可 以 统一 定义 。 当 使 用 CSS 
定义 盒子 的 width 和 height 时 ,定义 的 并 不 是 内 容 区 域 、 
填充 、 边 框 和 边界 所 占 的 总 区 域 , 实际 上 定义 的 是 内 容 
区 域 content 的 width 和 height。 为 了 计算 盒子 所 占 的 实 
际 区 域 ， 必 须 加 上 padding、border 和 margin。 

实际 宽度 = 左边 界 + 左 边框 + 左 填充 + 内 容 宽度 (width)+ 右 填充 + 右边 框 + 右边 界 

实际 高 度 = 上 边界 + 上 边框 + 上 填充 + 内 容 高 度 (height)+ 下 填充 + 下 边框 + 下 边界 






































图 16-2 盒子 模型 图 


16.2 边框: border 


边框 有 3 个 属性 : 一 是 边框 宽度 属性 ， 用 于 设置 边框 的 宽度 ， 二 是 边框 颜色 ， 用 于 设 
置 边 框 的 颜色 ， 三 是 边框 样式 ， 用 于 控制 边框 的 样式 。 


16.2.1 边框 宽度 : border-width 


设置 对 象 的 上 边框 、 右 边框 、 下 边框 和 左边 框 的 宽度 。 

基本 语法 ; 

border-width : medium | thin | thick | length; 
语法 说 明 ， 

medium: 默认 宽度 。 

thin: 小 于 默认 宽度 。 

thick: 大 于 默认 宽度 。 

length: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<head> 





<style type="text/css"> 
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| 

border-top-style: dashed; 
border-right-style: dashed; 
border-bottom-style: dotted; 
border-left-style: solid; 
line-height: 20px; 
border-top-width: 2px; 
border-right-width: 2px; 
border-bottom-width: 1lpx; 
border-left-width: 2px; 

} 

</style> 

</head> 

<body class="b"> 

边框 宽度 

边框 宽度 

边框 宽度 

</body> 

</html> 


加 粗 部 分 的 代码 分 别 用 来 设置 上 、 右 、 下 、 左 边框 的 宽度 ， 在 浏览 器 中 预览 效果 ， 如 
图 16-3 所 示 。 





- OO x 
人 EE -| BS 无 ;本文 村 
文件 (站 锋 强 (E) 查看 (V) 收 家 交 (A) 工具 (T 帮助 (H) 
或 100% 








图 16-3 设置 边框 宽度 


16.2.2 ”边框 颜色 : border-color 


边框 颜色 属性 border-color 用 来 定义 元 素 边框 的 颜色 。 
基本 语法 : 


border-color :颜色 值 
border-top-color: 颜 色 值 
border-right-color: 颜 色 值 
border-bottom-color: 颜 色 值 
border-left-color: 颜 色 值 
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语法 说 明 : 


border-top-color、border-right-color、border-bottom-color 和 border-left-color 属性 分 别 用 





来 设置 上 、 右 、 下 、 左 边框 的 颜色 ， 也 可 以 使 用 

颜色 。 
下 面 通过 实例 讲述 border-color 属性 的 使 月 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>border-color 实例 </title> 

<style type="text/css"> 

P.three 

{border-style: solid; 

border-color: #BB05C0 #00ff00 #0000ff} 
pLour 

{border-style: solid; 

border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) 
</style> 

</head> 

<body> 

<p class="three">3 个 颜色 边框 !</p> 

<p class="four">4 个 颜色 边框 !</p> 
</body> 

</html> 

















border-color 属性 来 统一 设置 4 个 边框 的 


目 ， 其 CSS 代码 如 下 。 


} 


在 浏览 器 中 浏览 可 以 看 到 ， 使 用 border-color 设置 了 不 同 颜色 的 边框 ， 如 图 16-4 所 示 。 


BR 
ES D -< GB border-color 安 全 
PE 


0 





| 





8 个 颜色 边框 ! 


个 六 ! 
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16-4 ”border-color 实例 效果 


16.2.3 ”边框 样式 : border-style 





使 用 边框 样式 属性 可 以 定义 边框 的 风格 样式 ， 这 个 属性 必须 月 


有 于 指定 可 见 的 边框 。 可 
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以 分 别 设置 上 边框 样式 border-top-style、 下 边框 样式 border-bottom-style、 左 边框 样式 
border-left-style 和 右边 框 样式 border-right-style。 


基本 语法 : 


border-style : none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset 


语法 说 明 : 

none: 无 边框 。 与 任何 指定 的 border-width 值 无 关 。 

hidden: 隐藏 边框 。IE 不 支持 。 

dotted: 在 Mac 平台 上 IE4+ 与 Windows 和 UNIX 平台 上 IE5.5+ 为 点 线 ， 否 则 为 实 线 。 
dashed: 在 Mac 平台 上 IE4+ 与 Windows 和 UNIX 平 台 上 IE5.5+ 为 虚线 ， 否 则 为 实 线 。 
solid: 实 线 边框 。 

double: 双 线 边框 。 两 条 单线 与 其 间隔 的 和 等 于 指定 的 border-width 值 。 

groove: 根据 border-color 的 值 画 3D 凹 槽 。 

ridge: 根据 border-color 的 值 画 蒙 形 边框 。 

inset: 根据 border-color 的 值 画 3D 止 边 。 

outset: 根据 border-color 的 值 画 3D 凸 边 。 

实例 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CcSS border-style 属性 示例 </title> 

<style type="text/css" media="all"> 
div#dotted { border-style: dotted;} 
div#dashed{ border-style: dashed;} 
div#solid{ border-style: solid;} 
div#double{ border-style: double;} 
div#groove{ border-style: groove;} 
div#ridge{ border-style: ridge; } 
div#inset{ border-style: inset;} 
div#outset{ border-style: outset;} 
div#none{ border-style: none;} 
divt{ border-width: thick; 
border-color: red; 
margin: 2em;} 
</style> 
</head> 
<body> 























<div id="dotted">border-style 属性 dotted (点 线 边框 ) </div> 
<div id="dashed">border-style 属性 dashed (虚线 边框 ) </div> 
<div id="solid">border-style 属性 solid ( 实 线 边 框 ) </div> 
<div id="double">border-style 属性 double ( 双 实 线 边 框 ) </div> 
<div id="groove">border-style 属性 groove (3D 止 槽 ) </div> 
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<div id="ridge">border-style 属性 ridge (3D 四 槽 ) </div> 
<div id="inset">border-style 属性 inset (边框 凹陷 ) </div> 
<div id="outset">border-style 属性 outset (边框 凸 出 ) </div> 


<div id="none">border-style 属性 none (无 样式 ) </div> 
</body> 
</html> 
在 浏览 器 中 浏览 ， 可 以 看 到 使 用 border-style 设置 了 不 同 的 边框 样式 效果 ， 如 图 16-5 
所 示 。 


ro - © | Scss bd-syt Res 
HM WE) EE) tah) IRM HD 









































图 16-5 ”border-style 实例 


16.3 ”设置 内 边 距 : padding 


padding 为 简写 属性 ,表示 在 一 个 声明 中 设置 所 有 内 边 距 。 这 个 简写 属性 设置 元 素 所 有 
内 边 距 的 宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 


16.3.1 项 部属 性: padding-top 
该 CSS 属性 用 来 设 定 上 间隙 的 宽度 。 
基本 语法 : 
padding-top: 边 距 值 ; 
语法 说 明 : 
该 属性 设置 元 素 上 内 边 距 的 宽度 。 行 内 非 替 换 元 素 上 设置 的 上 内 边 距 不 会 影响 行 高 计 
算 ， 因 此 ， 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 
会 与 其 他 内 容重 又 。 不 允许 指定 负 内 边 距 值 。 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
td {padding-top: 3cm} 
</style> 
</head> 
<body> 
<table border="2"> 
EZ 
<td> 
表格 上 内 边 距 为 3 
</td> 
</tr> 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 用 来 设置 上 内 边 距 ， 在 浏览 器 中 预览 ， 效 果 如 图 16-6 所 示 。 


一 口 x 
人 er D - © | SB zie | 
文件 (月 ”自强 (E) ”查看 (V) ”收藏 交 (A) 工具 (T) 三 动 (H) 














康 格 上 内 边 距 为 | 
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16-6 ”设置 上 内 边 距 效果 


16.3.2 ” 右 侧 属性 : padding-right 

该 CSS 属性 用 来 设 定 右 间隙 的 宽度 。 

基本 语法 : 

padding-right : 边 距 值 ; 

语法 说 明 : 

该 属性 设置 元 素 右 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 右 内 边 距 仅 在 元 素 所 生成 
的 第 一 个 行内 框 的 右边 出 现 。 
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实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
td{padding-right: 50%} 
</style> 
</head> 
<body> 
<table border="2"> 
<tr> 
<td> 
右 内 边 距 。 
</td> 
</tr> 
</table> 
</body> 
</html> 


加 粗 部 分 的 代码 是 设置 间距 为 50%， 在 浏览 器 中 预览 效果 如 图 16-7 所 示 。 


60 安 全 5 坦 61 wa [el— OO X | 
(© C 全 加 16.3.2%20%20 右 侧 尾 性 padding-righchtml ~v 口 - Q 


wi 7 MW 9 3 区 同 归 ” 厨 策 # ” 沸 关 图 - 中 区 允 ”月 查 录 人 家 
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16-7 ”设置 右 内 边 距 效果 


16.3.3 ”底部 属性 : padding-bottom 


padding-bottom 属性 设置 元 素 的 下 内 边 距 (底部 空白 )。 
基本 语法 : 


padding-bottom : 边 距 值 ; 
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语法 说 明 : 

该 属性 设置 元 素 下 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 下 内 边 距 不 会 影响 行 高 计 
算 ， 因 此 ， 如 果 一 个 元 素 既 有 内 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 
会 与 其 他 内 容重 登 。 不 允许 指定 负 内 边 距 值 。 

实例 代码 : 


1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 <!doctype html> 
1 
1 
1 
1 
1 
1 
1 
1 
1 





<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
td {padding-bottom: 3cm} 
</style> 

</head> 

<body> 

<table border="1"> 

<tr> 

<td> 

下 内 边 距 。 

</td> 

E> 

</table> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 底部 内 边 距 ， 在 浏览 器 中 预览 效果 如 图 16-8 所 示 。 


350 人 8 铺 81 Ra [x 
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0 站  》| 台 站 昌 ” 国 RR ”加 时 条 ”天 吉 时 ”人 沪 光 ”月 本 了 和 家 
D | © | Dnsmme 和 YX 档 十 到 > 
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16-8 设置 下 内 边 距 效果 


16.3.4 左 侧 属性 : padding-left 
padding-left 属性 设置 元 素 左 内 边 距 (空白 )。 
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基本 语法 : 
padding-left : 边 距 值 ; 


语法 说 明 : 

该 属性 设置 元 素 左 内 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 左 内 边 距 仅 在 元 素 所 生成 
的 第 一 个 行内 框 的 左边 出 现 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
td {padding-left: 2cm} 
</style> 

</head> 

<body> 

<table. border="1"> 

<tr> 

<td> 

左 内 边 距 。 

</td> 

EE 

</table> 

</body> 

</html> 


加 粗 部 分 的 代码 是 设置 左 内 边 距 ， 在 浏览 器 中 预览 效果 如 图 16-9 所 示 。 


16.4 设置 外 边 距 : margin 


margin 简写 属性 设置 一 个 元 素 所 有 外 边 距 的 宽度 ， 或 者 设置 各 边 上 外 边 距 的 宽度 。 块 
级 元 素 的 垂直 相 邻 外 边 距 会 合并 ， 而 行内 元 素 实 际 上 不 占 上 下 外 边 距 。 行 内 元 素 的 左右 外 
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HTML+DIV+CSS 网 页 设计 与 布局 买 用 教程 


算 ， 因 


16.4. 








边 距 不 会 合并 。 同 样 ， 浮 动 元 素 的 外 边 距 也 不 会 合并 。 人 允许 指定 负 的 外 边 距 值 ， 不 过 使 用 
时 要 小 心 。 


1 项 部 边界 属性 : margin-top 


上 边界 margin-top 属性 可 以 通过 指定 的 长 度 或 百分比 值 来 设置 元 素 的 上 边界 。 

基本 语法 : 

margin-top: 边 距 值 

语法 说 明 : 

该 属性 设置 元 素 上 外 边 距 的 宽度 。 行 内 非 蔡 换 元 素 上 设置 的 上 外 边 距 不 会 影响 行 高 计 


此 ， 如 果 一 个 元 素 既 有 外 边 距 又 有 背景 ， 从 视觉 上 看 可 能 延伸 到 其 他 行 ， 有 可 能 还 


会 与 其 他 内 容重 倒 。 不 允许 指定 负 外 边 距 值 。 
实例 代码 : 


<! 


doctype html> 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 
<style type="text/css"> 


P. 


topmargin {margin-top: 4cm} 


</style> 

</head> 

<body> 

<p class="topmargin"> 上 边 距 </p> 
</body> 

</html> 


加 粗 部 分 的 代码 是 设置 带 有 指定 上 外 边 距 ， 在 浏览 器 中 预览 效果 ， 如 图 16-10 所 示 。 
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图 16-10 设置 上 外 边 距 效果 
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16.4.2 ” 右 侧 边界 属性 : margin-right 


margin-right 属性 设置 元 素 的 右 外 边 距 。 
基本 语法 : 

margin-right: 边 距 值 

语法 说 明 : 

检索 或 设置 对 象 的 右 外 边 距 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<style type="text/css"> 
P.rightmargin {margin-right: 8cm} 
</style> 

</head> 

<body> 

<p> 这 个 段落 没有 指定 外 边 距 。</p> 
<pclass="rightmargin"> 这 个 段落 带 有 指定 的 右 外 边 距 。 这 个 段落 带 有 指定 的 右 外 边 距 。 这 个 
段落 带 有 指定 的 右 外 边 距 。 


</body> 
</html> 
加 粗 部 分 的 代码 是 设置 右 外 边 距 ， 在 浏览 器 中 预览 ， 效 果 如 图 16-11 所 示 。 





360 安 全 请 8.1 we [es= io lx 


C 全 会 加 5.4.2%20%20 右 伴 边 界 属性 margin-righEhtml 乡 v 
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16-11 ”设置 右 外 边 距 效 果 
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16.4.3 ”底部 边界 属性 : margin-bottom 
margin-bottom 属性 设置 元 素 的 下 外 边 距 。 


1 
1 
1 
| 
1 
! ”基本 语法 : 
| margin-bottom: 边 距 值 
1 
1 语法 说 明 : 
l 检索 或 设置 对 象 底部 外 边 距 。 
| <!doctype html> 
1 <html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


<style type="text/css"> 

P.bottormmargin {margin-bottom: 2cm} 

</style> 

</head> 

<body> 

<p> 没 有 指定 外 边 距 。</p> 

<p class="bottommargin"> 带 有 指定 的 下 外 边 距 。</p> 
<p> 没 有 指定 外 边 距 。</p> 


</body> 
</html> 
加 粗 的 代码 是 设置 底部 的 外 边 距 ， 在 浏览 器 中 预览 效果 如 图 16-12 所 示 。 


ee 口 x 
Mo - ¢| G rae 
文人 篇 句 (E) ”可 看 (V) 收藏 夫 (A) 工具 (T) 。 帮助 (H) 


没有 指定 外 边 距 。 
带 有 指定 的 下 外 边 距 。 





没有 指定 外 边 距 。 
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16-12 ”设置 底部 外 边 距 


16.4.4” 左 侧 边界 属性 : margin-left 
margin-left 属性 设置 元 素 的 左 外 边 距 。 
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基本 语法 : 

margin-left : 边 距 值 
语法 说 明 : 

检索 或 设置 对 象 左 外 边 距 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<style type="text/css"> 
p.leftmargin {margin-left: 2cm} 
</style> 

</head> 

<body> 

<p> 没 有 指定 外 边 距 。</p> 

<p class="leftmargin"> 带 有 指定 的 左 外 边 距 。</p> 
</body> 

</html> 


加 粗 部 分 的 代码 是 设置 左 外 边 距 ， 在 浏览 器 中 预览 效果 如 图 16-13 所 示 。 
9 ETE p+ c| 忆 天 Eva 2 国 ox 
文 作 了 。 六 三 日 ” 坦 看 (Y) 要 列 交 /A) 工具 (T) 项 动 (HI 
投 有 指定 外 亡 距 。 
带 有 指定 的 左 外 边 距 ， 








16-13 ”设置 左 外 边 距 


本 章 小 结 


网 页 设计 中 常 听 的 属性 名 : 内 容 (content)、 填 充 (padding)、 边 框 (borde)、 边 界 (margin)， 
CSS 盒子 模型 都 具备 这 些 属 性 。 对 于 这 些 属 性 ， 我 们 可 以 用 日 常生 活 中 的 常见 事物 一 一 盒 
子 作 一 个 比喻 来 理解 ,所 以 叫 它 盒子 模型 .CSS 盒子 模型 就 是 在 网 页 设计 中 经 常用 到 的 CSS 
技术 所 使 用 的 一 种 思维 模型 。 盒 子 模型 是 CSS 控制 页 面 的 基础 ， 学 习 完 本 章 之 后 ， 读 者 应 
能 够 清楚 地 理解 盒子 的 含义 以 及 盒子 的 组 成 。 
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1. 填空 题 


等 边框 样式 。 


2. 操作 题 


练 习 题 


(1) 边框 样式 属性 border-style 是 边框 最 重要 的 属性 ，CSS 规定 了 


(2) 简写 属性 在 一 个 声明 中 设置 所 有 内 边 距 属性 .这 个 简写 属性 设置 元 素 所 有 
内 边 距 的 宽度 ， 或 者 设置 各 边 上 内 边 距 的 宽度 。 

(3) 边框 有 3 个 属性 : 一 是 边框 宽度 属性 ， 用 于 设置 边框 的 宽度 ; 二 是 ,用 于 
设置 边框 的 颜色 ; 三 是 边框 样式 ， 用 于 控制 边框 的 样式 。 


设置 边框 效果 ， 如 图 16-14 所 示 。 
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网 购 技巧 编辑 
1、 利 用 网 购 叶 和 进行 网 购 ， 
2、 选择 网 店 一 定 要 与 卖 家 交流 ， 多 问 ， 还 要 着 
标识 ， 能 否 实行 OVS 服 . 
和 了 商品， 从 大 i 人 的 部 权 


4、 用 银行 卡 付款 时 ， 最 好 卡 里 不 要 有 大 多 的 金 玫 
站 生生 aa 芝 Ren 的 请 可 在 由 上 抽 J! 
购买 中 1 
到. 全 看 商 品 图 片 分 类 是 商业 有 片 证 四 


攻 ， 人 中 好 的 了 他 的 村 所 是: 有 
。 查 店主 的 信用 记录 。 pore gabe 

3 要 仔细 看 店主 对 该 评价 的 解释 。 
1 
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图 16-14 ”设置 边框 效果 


第 17 章 盒子 的 浮动 与 定位 


【学 习 目标 】 

在 用 CSS 控制 排版 的 过 程 中 ， 定 位 一 直 被 认为 是 一 个 难点 ， 这 主要 表现 在 很 多 网 友 在 
没有 深入 理解 定位 的 原理 时 ， 排 出 来 的 杂乱 网 页 常 让 他 们 不 知 所 措 ， 而 另 一 边 一 些 高 手 则 
常常 借助 定位 的 强大 功能 做 出 很 酷 的 效果 来 ， 比 如 CSS 相册 等 ， 因 此 ， 自 己 杂 乱 的 网 页 与 
高 手 完 美的 设计 形成 鲜明 对 比 ， 这 在 一 定 程度 上 打击 了 初学 者 定位 的 朋友 。 

其 实 CSS 排版 并 不 难 ， 只 要 了 解 了 盒子 的 浮动 和 定位 知识 后 ， 就 能 轻易 地 排出 美观 的 
网 页 了 。 

本 章 主要 内 容 包 括 

(1) 盒子 的 浮动 ; 

(2) 元 素 的 定位 ; 

(3) 盒子 的 定位 ; 

(4) z-index 空间 位 置 。 


17.1 盒子 的 浮动 


float 是 CSS 的 定位 属性 。 在 传统 的 印刷 布局 中 ， 文 本 可 以 按照 需要 围绕 图 片 ， 一 般 把 
这 种 方式 称 为 “文本 环绕 ”。 在 网 页 设计 中 , 应 用 了 CSS 的 float 属性 的 页 面 元 素 就 像 在 印 
刷 布 局 里 面 的 被 文字 包围 的 图 片 一 样 。 


17.1.1 元 素 的 浮动 属性 : float 


浮动 属性 是 CSS 布局 的 最 佳 利器 ， 可 以 通过 不 同 的 浮动 属性 值 灵 活 地 定位 div 元 素 ， 
以 达到 灵活 布局 网 页 的 目的 。 我 们 可 以 通过 CSS 的 属性 float 令 元 素 向 左 或 向 右 浮动 。 也 就 
是 说 ， 令 盒子 及 其 中 的 内 容 浮动 到 文档 的 右边 或 者 左边 。 以 往 这 个 属性 总 应 用 于 图 像 ， 使 
文本 围绕 在 图 像 周 围 ， 不 过 在 CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 
框 ， 而 不 论 它 本 身 是 何 种 元 素 。 

基本 语法 : 

float: none | left | right | inherit; 

语法 说 明 : 

none: 是 默认 值 ， 元 素 不 浮动 ， 并 会 显示 其 在 文本 中 出 现 的 位 置 ; 

left: 表示 元 素 向 左 浮动 ; 
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也 i 


right: 表示 元 素 向 右 浮动 ; 





inherit: 规定 应 该 从 父 元 素 继承 float 属 怕 
inherit。 


实例 代码 : 





E 的 值 , IE8 及 以 下 的 版 本 目前 都 不 支持 属性 值 





浮动 的 性 质 比 较 复杂 ， 下 面 通过 一 个 简单 的 实例 讲述 float 属性 的 使 用 ， 其 代码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title>float 属性 --- 没 有 设置 任何 浮动 </title> 


<style type="text/css"> 
body{ 
margin:20px; 


font-family:Arial; font-size:14px; 


} 

#fathert{ 
background-color:#33bb00; 
border:5px solid #111111; 
padding:8px; 

} 

#father div{ 
padding:15px; 
margin:15px; 
border:2px dashed #111111; 
background-color:#90baff; 
} 

#father pt{ 
border:3px dashed #111111; 
background-color:#FFCC66; 
} 

.sonlf{ 

/* 这 里 设置 sonl 的 浮动 方式 */ 

} 

.Son2{ 

/* 这 里 设置 son2 的 浮动 方式 */ 

} 

.Son3{ 

/* 这 里 设置 son3 的 浮动 方式 */ 

} 

</style> 

</head> 

<body> 
<div id="father"> 


<div class="sonl">boxl</div> 
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<div class="son2">box2</div> 

<div class="son3">box3</div> 
<p> 夏 去 冬 来 ， 寒 风 依旧 ， 是 谁 使 得 童心 不 再 单纯 ， 是 谁 给 了 谁 心灵 一 分 寄托 ， 又 是 谁 融化 了 谁 内 心 
深 处 的 冰 墙 。 随 着 春 去 春 又 来 ， 伴 着 花 谢 花 又 开 ， 在 乡间 错乱 的 花田 里 ， 是 谁 用 话语 情 深 的 彩 笔 ， 
勾勒 出 唯美 一 世 的 回忆 。</p> 

</div> 
</body> 
</html> 


上 面 的 代码 定义 了 4 个 <div> 块 , 其 中 一 个 父 块 , 另外 3 个 是 它 的 子 块 。 为 了 便于 观察 ， 
将 各 个 块 都 加 上 了 边框 以 及 背景 颜色 ， 并 且 让 <body> 以 及 各 个 <div> 有 一 定 的 margin 值 。 

如 果 3 个 <div> 都 没有 设置 任何 浮动 属性 ， 在 父 盒子 中 ，4 个 盒子 各 自 向 右 伸展 ， 竖 直 
方向 依次 排列 ， 效 果 如 图 17-1 所 示 。 





























17-1 没有 设置 任何 浮动 时 的 效果 


1. 设置 第 1 个 浮动 的 <div> 
下 面 将 第 一 个 <div> 设 置 为 浮动 ， 在 上 面 的 代码 中 找到 : 


.Sonli 
/* 这 里 设置 sonl 的 浮动 方式 */ 
} 


将 .sonl 盒子 设置 为 向 左 浮动 ， 代 码 如 下 : 


.sonlf{ 

/* 这 里 设置 sonl 的 浮动 方式 */ 

float:left; 

} 

这 时 效果 如 图 17-2 所 示 。 可 以 看 到 box2 的 文字 围绕 着 boxl 排列 ， 而 此 时 浮动 的 盒子 
box1l 的 宽度 不 再 延伸 ， 其 宽度 为 容纳 内 容 的 最 小 宽度 。 
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17-2 设置 第 1 个 <div> 浮 动 时 的 效果 


2. 设置 第 2 个 浮动 的 <div> 
下 面 把 第 2 个 浮动 的 <div> 设 为 left， 将 .son2 盒子 设置 为 向 左 浮动 ， 代 码 如 下 : 


.Son2{ 

/* 这 里 设置 son2 的 浮动 方式 */ 
float:left; 

} 


这 时 浏览 效果 如 图 17-3 所 示 。 可 以 看 到 box2 也 变 为 根据 内 容 确 定 宽度 ， 并 使 box3 的 














文字 围绕 box2 排列 。box1l 与 box2 之 间 的 空间 是 由 二 者 之 间 的 margin 构成 的 。 


-oo 








17-3 ”设置 前 两 个 <div> 浮 动 时 的 效果 


3. 设置 第 3 个 浮动 的 <div> 
下 面 把 box3 也 设置 为 左 浮 动 ， 将 .son3 盒子 设置 为 向 左 浮动 ， 代 码 如 下 : 


.son3{ 


/* 这 里 设置 son3 的 浮动 方式 */ 
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float:left; 

} 

这 时 效果 如 图 17-4 所 示 。 可 以 看 到 文字 所 在 的 盒子 范围 以 及 文字 会 围绕 浮动 的 盒子 
排列 。 


- -5 匡 至 
[el Er Dp- > 


全 foat 时 性-- 设 可 筑 3 人 主动 x 革 放 时 























EE， 。 随 
双开 i 是 淮 用 话语 情 革 的 亲笔， 入 和 








成 100% ~ 





17-4 设置 3 个 <div> 浮 动 


4. 改变 浮动 的 方向 


CSS 中 很 多 时 候 会 用 到 浮动 来 布局 ， 也 就 是 经 常见 到 的 float:left 或 者 float:right， 下 面 
看 看 改变 box3 浮动 方向 ， 即 float:right， 这 时 效果 如 图 17-5 所 示 。 可 以 看 到 box3 移动 到 了 
最 右 端 ， 文 字段 落 盒子 的 范围 没有 改变 ， 但 文字 变 成 了 夹 在 box2 和 box3 之 间 。 
EC 


KE 8) masse hem p- > 
感 foat 量 性 -改变 泽 动 的 方向 x 




















拆 100% > 


图 17-5 改变 浮动 的 方向 


[对 提示 : 应 用 Web 标准 构建 网 页 以 后 ,float 属性 是 布局 中 非常 重要 的 属性 ， 我 们 党 
通过 对 <div> 元 素 应 用 float 来 进行 布局 ， 不 但 对 整个 版 式 进行 规划 ， 2 
对 一 些 基本 元 素 如 导航 等 进行 排列 。 


17.1.2 ”清除 浮动 属性 : clear 
float 属性 也 被 称 为 浮动 属性 ， 对 前 面 的 <div> 元 素 设置 浮动 属性 后 ， 当 前 面 的 div 元 素 
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留 有 足够 的 空白 宽度 时 ， 后 面 的 <div> 元 素 将 自动 流 上 来 ， 和 前 面 的 <div> 元 素 并 列 于 一 行 。 
为 了 更 加 灵活 地 定位 <div> 元 素 ，CSS 提供 了 clear 属性 ， 中 文 意思 即 为 “清除 ”。clear 
属性 的 值 有 none、left、right 和 both， 默 认 值 为 none。 当 多 个 块 状元 素 由 于 第 1 个 设置 浮 
动 属性 而 并 列 时 ， 如 果 某 个 元 素 不 需要 被 “ 流 ” 上 去 ， 即 可 设置 相应 的 clear 属性 。 
基本 语法 : 


1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 Clear: none | left | right | both 
1 
1 
1 
1 
1 
1 
1 
1 
1 











语法 说 明 : 

none: 表示 人 允许 两 边 都 可 以 有 浮动 对 象 ， 是 默认 值 ; 

left: 表示 不 允许 左边 有 浮动 对 象 ; 

right: 表示 不 允许 右边 有 浮动 对 象 ; 

both: 表示 不 允许 有 浮动 对 象 。 

实例 代码 : 

使 用 clear 属性 可 以 让 元 素 边 上 不 出 现 其 他 浮动 元 素 。 下 面 通过 一 个 简单 的 实例 讲述 
clear 属性 的 使 用 ， 其 代码 如 下 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 清 除 浮动 属性 clear</title> 
<style type="text/css"> 
.lefttext{ 
float: left; 
height: 180px; 
width: 170px; 
border: lpx solid #bldlce; 
background-color: #5ae047; 
} 
.foottext{ 
height: 180px; 
width: 170px; 
border: lpx solid #bldlce; 
background-color: #f3el3a; 
} 
.Clear 
{ 
clear:both; 
</style> 
</head> 
<body> 
<div class="lefttext"> 区 块 1</div> 
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<div class="lefttext"> 区 块 2</div> 
<div class="clear"></div> 

<div class="foottext"> 区 块 3</div> 
</body> 

</html> 


如 果 没 有 clear 这 一 层 ，“ 区 块 3” 会 紧 接 区 块 2 并 列 在 同一 行 。 加 了 clear 这 一 层 后 ， 
会 把 上 面 的 浮动 <div> 的 影响 清除 ， 使 其 不 至 影响 下 面 <div> 的 布局 ， 浏 览 效 果 如 图 17-6 
所 示 。 














a - 5 匡 到 
Ea sme -> 
区 块 1 区 块 2 ~ 
区 块 3 
v 
100% 





图 17-6 clear 属 性 


17.2 元 素 的 定位 


position 定位 与 float 一 样 ， 也 是 CSS 排版 中 非常 重要 的 概念 。 定 位 允许 用 户 精确 定义 
元 素 框 出 现 的 相对 位 置 ， 可 以 相对 于 它 通常 出 现 的 位 置 ， 相 对 于 其 上 级 元 素 ， 相 对 于 另 一 
个 元 素 ， 或 者 相对 于 浏览 器 窗口 本 身 。 


17.2.1 ”元素 的 定位 属性 : position 


在 CSS 布局 中 ，position 属性 非常 重要 ， 很 多 特殊 容器 的 定位 必须 用 position 来 完成 。 
通过 使 用 position 属性 ， 我 们 可 以 选择 4 种 不 同类 型 的 定位 。 

基本 语法 : 

position: static | absolute | fixed | relative 

top: auto | 长 度 值 | 百分比 

Fight: auto | 长 度 值 | 百分比 


bottom: auto | 长 度 值 | 百分比 
left: auto | 长 度 值 | 百分比 
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语法 说 明 : 
从 上 面 语法 可 以 看 出 ， 定 位 的 方法 有 很 多 种 ， 它 们 分 别 是 静态 (static)、 绝 对 定位 





(absolute)、 固 定 (fixed) 和 相对 定位 (relative)， 其 具体 功能 见 表 17-1。 


表 17-1 position 的 属性 及 其 功能 说 明 




















属 性 功能 说 明 
absolute 生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 
元 素 的 位 置 通过 left、top、right 以 及 bottom 属性 进行 规定 
fixed 生成 固定 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 。 
元 素 的 位 置 通过 left、top、right 以 及 bottom 属性 进行 规定 
relative | 生成 相对 定位 的 元 素 ， 相 对 于 其 正常 位 置 进 行 定位 





static 默认 值 。 没 有 定位 ， 元 素 出 现在 正常 的 流 中 





实例 代码 : 
下 面 通过 具体 实例 对 position 属性 的 使 用 方法 做 一 个 概述 ， 其 代码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>position 定位 </title> 

</head> 

<style> 

.boxt{ 

width:250px; height:250px; 

position:absolute; top:150px; left:50px; 

background: #6Cffff; font-family: "宋体 "; color:# 030000 
} 

</style> 

<body> 

<div class="box"> 这 里 的 box 在 设置 了 position:absolute 后 ， 是 以 body 的 左上 角 为 原 
始点 定位 的 。</div> 

</body> 

</html> 


代码 加 粗 的 部 分 ， 使 用 position:absolute 设置 为 绝对 定位 ， 并且 设置 距离 左 侧 50px， 距 


离 顶部 150px。 这 里 的 box 在 设置 了 position:absolute 后 , 是 以 body 的 左上 角 为 原始 点 定位 


的 ， 
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如 图 17-7 所 示 。 




















- o 攻 至 
Dp- > 
这 里 的 box 在 设置 了 
position:absolute 后 ， 是 以 body 的 
左上 第 为 原始 点 定位 的 。 
成 100& 


图 17-7 ”position 定位 


17.2.2 ”上 边 偏 移 属性 top、 下 边 偏 移 属性 bottom 


通过 top 属性 来 设置 上 边 偏 移 属性 ， 通 过 bottom 属性 来 设置 下 边 偏 移 属 性 。 
基本 语法 : 
position: absolute | fixed | relative 


top: auto | 长 度 值 | 百分比 
bottom: auto | 长 度 值 | 百分比 


语法 说 明 : 

top、botton 属性 只 有 当 position 属性 设置 为 absolute、fixed、relative 时 才 有 效 ， 而 且 
在 position 属性 取 值 不 同时 , 它们 的 含义 也 不 同 。 top 和 bottom 属性 值 除 了 可 以 设置 为 绝对 
的 像素 值 外 ， 还 可 以 设置 为 百分数 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<style type="text/css"> 
h2.pos_top 
{position:absolute; 
top:20px;} 
h2.pos_bottom 
{position:absolute; 
bottom:20px} 

</style> 
<title> 上 边 偏 移 属性 top、 下 边 偏 移 属性 bottom</title> 
</head> 
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<body> 

<h2>gnbsp; </h2> 

<h2>gnbsp; </h2> 

<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos_top">top:20px; 设 置 标题 距离 顶部 20px</h2> 
<p>&nbsp; </p> 

<h2 class="pos bottom">bottom:20px; 设 置 标题 距离 底部 20px</h2> 
</body> 

</html> 


top:20px: 表 示 设 置 标题 距离 顶部 20px，bottom:20px: 表 示 设 置 标题 距离 底部 20px， 如 
图 17-8 所 示 。 
= 本 


| 司 Honestop, Finebouomntml 中- > | 


和 上 zz 人 多 局 性 topp、 下 妈 信 ] 


top:20px; 设 置 标题 距离 顶部 20px 











这 是 位 于 正常 位 置 的 标题 


bottom:20px; 设 置 标题 距离 底部 20px 


磺 100% ~ 


17-8 ”上 边 偏 移 属性 top、 下 边 偏 移 属性 bottom 


17.2.3 ”左边 偏 移 属性 left、 右 边 偏 移 属 性 right 


通过 left 属性 可 以 设置 左边 偏 移 属性 ， 通 过 right 属性 可 以 设置 右边 偏 移 属性 。 

基本 语法 : 

position: static | absolute | fixed | relative 

left: auto | 长 度 值 | 百分比 

right: auto | 长 度 值 | 百分比 

语法 说 明 : 

left、right 属性 只 有 当 position 属性 设置 为 absolute、fixed、relative 时 才 有 效 ， 而 且 在 
position 属性 取 值 不 同时 ， 它 们 的 含义 也 不 同 。left 和 right 属性 值 除 了 可 以 设置 为 绝对 的 像 
素 值 外 ， 还 可 以 设置 为 百分数 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<style type="tezxt/css"> 
.imgl 
{ 
position:absolute; 
left:100px; 
} 
.img2 
{ 
position:absolute; 
right:100px; 
和 
</style> 
<title> 左 边 偏 移 属性 left、 右 边 偏 移 属性 right</title> 
<body> 
<img src="2.jpg" class="imgl" width="230" height="156" > 
&nbsp; Enbsp; Enbsp; &nbsp; 
<img src="1.jpg" class="img2" width="169" height="196" > 
</body> 
</html> 


上 面 的 代码 首先 使 用 left:100px: 和 right:100px: 分 别 定 义 了 imgl 和 img2 的 样式 ， 使 图 
像 分 别 距离 左边 100px 和 距离 右边 100px， 在 浏览 器 中 效果 如 图 17-9 所 示 。 
四 | 


名 BE p-3 医 
全 nn 人 Eft 这. BB, 

















本 1006 ~ 





图 17-9 左边 偏 移 属性 left、 右 边 偏 移 属性 right 


17.3 盒子 的 定位 


CSS 定位 令 你 可 以 将 一 个 元 素 精确 地 放 在 页 面 上 所 指定 的 地 方 。 联 合 使 用 定位 与 浮动 ， 
能 够 创建 多 种 高 级 而 精确 的 布局 。 定 位 的 方法 有 很 多 种 ， 它 们 分 别 是 绝对 定位 (absolute)、 
固定 定位 (fixed)、 相 对 定位 (relative) 和 静态 定位 (static)。 
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17.3.1 绝对 定位 : absolute 


当 容 器 的 position 属性 值 为 absolute 时 , 这 个 容器 即 被 绝对 定位 了 。 绝 对 定位 在 几 种 定 


位 方法 中 使 用 最 广泛 ， 这 种 方法 能 够 很 精确 地 将 元 素 移动 到 你 想 要 的 位 置 。 使 用 绝对 定位 
的 容器 的 前 面 的 或 者 后 面 的 容器 会 认为 这 个 层 并 不 存在 ， 即 这 个 容器 浮 于 其 他 容器 上 ， 它 
是 独立 出 来 的 ， 所 以 position:absolute 用 于 将 一 个 元 素 放 到 固定 的 位 置 非常 方便 。 

















如 果 对 容器 设置 了 绝对 定位 , 默认 情况 下 ,容器 将 紧 挨 着 其 父 容器 对 象 的 左边 和 顶 边 ， 


即 父 容器 对 象 左 上 角 。 


基本 语法 : 

position: absolute 

left: auto | 长 度 值 | 百分比 
right: auto | 长 度 值 | 百分比 
top: auto | 长 度 值 | 百分比 
bottom: auto | 长 度 值 | 百分比 


语法 说 明 : 
通过 left、right、top、bottom 等 属性 与 margin、padding、border 进行 绝对 定位 ， 绝 对 


定位 的 元 素 可 以 有 边界 , 但 这 些 边界 不 压缩 。 定 位 的 方法 为 在 CSS 中 设置 容器 的 top( 顶 部 )、 
bottom( 底 部 )、left( 左 边 ) 和 right( 右 边 ) 的 值 ， 这 4 个 值 的 参照 对 象 是 浏览 器 的 4 条 边 。 
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实例 代码 : 

下 面 通过 实例 分 析 绝 对 定位 方式 的 使 用 ， 其 代码 如 下 。 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>absolute 属性 </title> 

<style type="text/css"> 

body{ 
margin:15px; 
font-family:Arial; 
font-size:12px; 

} 

#fathert{ 
background-color:#FF9933; 
border:2px dashed #000000; 
padding:25px; 

} 

#father div{ 
background-color:#66CC66; 
border:2px dashed #000000; 
padding:10px; 
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#block2{ 
} 
</style> 
</head> 
<body> 
<div id="father"> 
<div >boxl</div> 
<div id="block2">bozx2</div> 
<div >box3</div> 
</div> 
</body> 
</html> 


这 里 3 个 div 都 没有 设置 绝对 定位 , 可 以 看 到 一 个 父 <div> 里 面 有 3 个 <div>, 都 是 以 标 
准 流 方式 排列 ， 效 果 如 图 17-10 所 示 。 








17-10 ”未 设置 绝对 定位 的 效果 


下 面 使 用 绝对 定位 方式 ， 在 代码 中 找到 对 #block2 的 CSS 设置 位 置 ， 目 前 它 是 空 的 ， 
下 面 把 它 改 为 如 下 代码 : 
#block2{ 
position:absolute; 
top:0; 
right:0; 
} 
这 里 将 box2 的 定位 方式 改 为 绝对 定位 absolute， 此 时 效果 如 图 17-11 所 示 。 这 时 是 以 
浏览 器 窗口 作为 定位 基准 的 。 此 外 ， 该 <div> 会 彻底 脱离 标准 流 ，box3 会 紧 挨 着 box1， 就 
好 像 没有 box2 一 样 。 
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17-11 ”将 中 间 的 div 设置 为 绝对 定位 


下 面 将 block2 的 设置 改 为 如 下 : 


#block2{ 
position:absolute; 
top:100; 
right:100; 


} 


这 时 的 效果 如 图 17-12 所 示 , 以 浏览 器 为 基准 , 从 左上 角 开 始 向 下 和 向 左 各 移动 100px， 
得 到 图 中 的 效果 。 





17-12 ”设置 偏 移 后 的 效果 


17.3.2 固定 定位 : fixed 


当 容器 的 position 属性 值 为 fxed 时 ， 这 个 容器 即 被 固定 定位 了 。 固 定 定位 和 绝对 定位 
非常 类 似 ， 不 过 被 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 。 在 视野 中 ， 固 定 定位 的 
容器 的 位 置 是 不 会 改变 的 。 

基本 语法 : 

position: fixed 


left: auto | 长 度 值 | 百分比 
right: auto | 长 度 值 | 百分比 


BD 2o 





top: auto | 长 度 值 | 百分比 
bottom: auto | 长 度 值 | 百分比 


语法 说 明 : 





定位 的 方法 为 在 CSS 中 设置 容器 的 top( 顶 部 )、bottom( 底 部 )、left( 左 边 ) 和 right( 右 边 ) 
的 值 ， 这 4 个 值 的 参照 对 象 是 浏览 器 的 4 条 边 。 


实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Css 固定 定位 </title> 
<style type="text/css"> 
*{margin: Opx; 
padding:0px;} 
#allf{ 
width:400px; 
height:400px; 
background-color:#FC3000; 





} 
#fixed{ 
width:100px; 
height:100px; 
border:15px outset #£00000; 
background-color:#9c9000; 
position:fixed; 
top:30px; 
left:10px; 
} 
</style> 
</head> 
<body> 
<div id="all"> 
<div id="fixed"> 固 定 的 容器 </div> 
</div> 
</body> 
</html> 


浏览 效果 如 图 17-13 所 示 。 可 以 尝试 拖 动 浏览 器 的 垂直 滚动 条 ， 固 
位 置 改变 。 





也 
蝶 


器 不 会 有 任何 
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图 17-13 固定 定位 方式 


17.3.3 ”相对 定位 : relative 


采用 相对 定位 的 元 素 ,其 位 置 是 相对 于 它 在 文档 中 的 原始 位 置 计算 而 来 的 。 这 意味 着 ， 
相对 定位 是 通过 将 元 素 从 原来 的 位 置 向 右 、 向 左 、 向 上 或 向 下 移动 来 定位 的 。 采 用 相对 定 
位 的 元 素 会 获得 相应 的 空间 。 

基本 语法 : 

position: relative 

left: auto | 长 度 值 | 百分比 

right: auto | 长 度 值 | 百分比 


top: auto | 长 度 值 | 百分比 
bottom: auto | 长 度 值 | 百分比 


语法 说 明 : 
当 容 器 的 position 属性 值 为 relative 时 ， 这 个 容器 即 被 相对 定位 了 。 相 对 定位 和 其 他 定 
位 相似 ， 也 是 独立 出 来 浮 在 上 面 。 不 过 相对 定位 的 容器 的 top( 顶 部 )、bottom( 底 部 )、left( 左 








边 ) 和 right( 右 边 ) 属 性 参照 对 象 是 其 父 容器 的 4 条 边 ， 而 不 是 浏览 器 窗口 ， 并 且 相 对 定位 的 
容器 浮上 来 后 ， 其 所 占 的 位 置 仍然 留 有 空位 ， 后 面 的 无 定位 容器 仍然 不 会 “ 挤 ” 上 来 。 
实例 代码 : 
<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>CSS 相对 定位 </title> 
<style type="text/css"> 
*{margin: Opx; 
padding:0px;} 
#allf{f 
width:600px; 
height:400px; 
background-color:#CC6; 
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} 
#relativetf 
width:120px; 
height:80px; 
border:10px ridge #f£00; 
background-color:#9c9; 
position:relative; 
top:10px; 
left:200px; 
} 
#a, #b{ 
width:200px; 
height:120px; 
background-color:#F9F; 
border:3px outset #000; 
} 
</style> 
</head> 
<body> 
<div id="all"> 
<qdiv idq="a"> 第 1 个 无 定位 的 div 容器 </div> 
<div id="relative"> 相 对 定位 的 容器 </div> 
<qdiv id="b"> 第 2 个 无 定位 的 div 容器 </div> 
</div> 
</body> 
</html> 


这 里 给 外 部 <div> 设 置 了 # CC6 背景 色 ， 并 给 内 部 无 定位 的 <div> 设 置 了 证 9F 背景 色 ， 
而 相对 定位 的 <div> 容 器 设置 了 #9c9 背景 色 ， 并 设置 了 ridge 类 型 的 边框 。 浏 览 效 果 如 
图 17-14 所 示 。 


文 者 四。 鲍 晶 色 ) 查看 WD 收 大 大 () 工具 QD 利 助 中 








17-14 ”相对 定位 
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相对 定位 的 容器 其 实 并 未 完全 独立 ， 浮 动 范 











图 仍然 在 父 容 器 内 ， 并 且 其 所 占 的 空白 位 














置 仍然 有 效 地 存在 于 前 
17.3.4 








后 两 个 容器 之 间 。 


静态 定位 : static 


如 果 没 有 指定 position 属性 值 ,支持 position 属性 的 HTML 对 象 都 是 默认 为 static。static 





下 面 给 出 一 个 实例 代码 ， 没 有 设置 任何 position 属性 ， 相 当 于 使 用 static 方式 定位 ， 其 


1 
1 
| 
1 是 默认 值 ， 它 表示 块 保持 在 原本 应 该 在 的 位 置 ， 不 会 重新 定位 。 通常 此 属性 值 可 以 不 设置 ， 
1 
1 
1 
1 
1 
1 


除非 是 要 覆盖 之 前 的 定义 。 
实例 代码 : 

代码 如 下 。 
<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 

<title>position 属性 </title> 

<style type="text/css"> 

body{ 
margin:20px; 
font :Arial 12px; 

} 

#fathert{ 
background-color:#FF9900; 
border:2px dashed #000000; 
padding:20px; 

} 

#blockl{ 
background-color:#FF99FF; 
border:lpx dashed #000000; 
padding:10px; 

} 

</style> 

</head> 

<body> 
<div id="father"> 

<div id="blockl">boxl</div> 
</div> 

</body> 

</html> 


在 浏览 器 中 浏览 ， 效 果 如 图 17-15 所 示 ， 这 是 





一 个 很 简单 的 标准 流 方式 的 两 层 的 盒子 。 


子 有 的 海 动 与 定位 





语 收 戌 天 乱 position 必 性 











17-15 ”static 定位 


17.4 ”z-index 空间 位 置 


CSS 可 以 处 理 高 度 、 宽 度 、 深 度 3 个 维度 。 在 前 面 的 课程 中 ， 我 们 已 经 了 解 了 前 两 个 
维度 。 在 本 课 中 ， 我 们 将 学 习 如 何 令 不 同 元 素 具 有 层次 。 简 言 之 ， 就 是 关于 元 素 堆 倒 的 次 
序 问 题 。 

z-index 属性 设置 元 素 的 堆 和 登 顺序 , 拥有 更 高 堆 全 顺序 的 元 素 总 是 会 处 于 堆 琶 顺序 较 低 
元 素 的 前 面 。 

基本 语法 : 


z-index: auto | 数字 ; 


语法 说 明 : 

z-index 属性 的 值 为 整数 ， 可 以 为 正 数 也 可 以 为 负数 。 当 块 被 设置 position 时 ， 该 值 便 
可 设置 各 块 之 间 的 重合 高 低 关 系 ， 默认 的 z-index 值 为 0。auto 遵从 其 父 对 象 的 定位 ; 数字 
必须 是 无 单位 的 整数 值 ， 可 以 取 负 值 。 

实例 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 层 县 顺 序 </title> 
<style type="text/css"> 
过 = 
.img { 
position:absolute; 
top: 25px; 
right: 20px; 
left: 25px; 
bottom: 20px; 
z-index: 1; 
width: 394px; 
height: 398px; 
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=-Eext 
font-size: 12px; 
position: absolute; 
下 O 350X> 
right: 20px7 
lefts 30px> 
bottom: 25px; 
Zindex: 2 
height: 130px; 





} 
--> 
</style> 
</head> 
<body> 
<div><img src="images/bj.jpg" width="330" height="352" class="img" 
/></div> 
<div class="text"> 
<p> 尺 寸 : 均码 </p> 
<p> 肩 宽 36CM 胸围 86CM 裙 长 87CM 袖 长 60CM</p> 
<p> 这 款 连衣裙 部 分 下 摆 雪 纺 花 在 右边 ， 此 类 不 算 质量 问题 。</p> 
<p> 小 店 商 品 基本 上 都 是 现货 销售 , 但 是 由 于 商品 流动 迅速 和 难以 预测 , 难免 会 出 现 暂时 的 缺 货 断 
码 断 色 问 题 , 所 以 请 亲 们 拍 前 务必 和 掌柜 联系 询问 是 否 有 货 ， 对 于 直接 拍 下 付款 但 没有 现货 的 情况 ， 
掌柜 会 第 一 时 间 主 动 联系 协商 推迟 发 货 或 者 退 款 问题 。</p> 
<p><br> 
</p> 
</div> 
</body> 
</html> 


此 段 代 码 中 首先 在 <head></head> 之 间 , 用 <style> 定 义 了 “img” 标 记 中 的 position 属性 
为 absolute、z-index 为 1, 表示 默认 最 底层 , 定义 了 “text” 标 记 中 的 position 属性 为 absolute、 
z-index 为 2， 然后 分 别 对 图 像 和 段落 文本 应 用 “img” 和 “text” 样 式 。 由 于 图 像 的 z-index 
是 1， 因 此 它 在 文本 的 后 面 出 现 。 在 浏览 器 中 预览 效果 ， 如 图 17-16 所 示 。 


请 由 天 着 呈 和 





We 


be” 
Ca 此 不 节 抽 量 问题 。 


a 所 以 


~、 对 于 直接 拍 下 付 邯 柜 全 第 一时 间 主 动 联 系 





17-16 ”z-index 空间 位 置 
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重子 隐 海 动 与 定位 


本 章 小 结 


CSS 中 的 盒子 模型 是 为 了 让 我 们 充分 理解 DIV+CSS 模型 的 定位 功能 , 就 是 利用 盒子 模 
型 这 样 的 布局 方式 代替 了 传统 的 表格 布局 方式 ,所 以 盒子 模型 是 在 学 习 DIV+CSS 布局 方式 
中 必须 要 学 习 的 一 个 模型 ， 通 过 这 个 模型 能 够 明白 网 页 中 <div> 和 <div> 之 间 的 相对 位 置 是 
如 何 布局 的 。 





练 习 题 
1. 填空 题 
(1) 浮动 属性 是 CSS 布局 的 最 佳 利器 ， 可 以 通过 不 同 的 浮动 属性 值 灵活 地 定位 <div> 
元 素 ， 以 达到 灵活 布局 网 页 的 目的 。 我 们 可 以 通过 CSS 的 属性 令 元 素 向 左 或 向 右 


浮动 。 也 就 是 说 ， 令 盒子 及 其 中 的 内 容 浮 动 到 文档 的 右边 或 者 左边 。 

(2) 为 了 更 加 灵活 地 定位 <div> 元 素 ，CSS 提供 了 属性 ,中文 意 思 即 为 “清除 ”。 
它 的 属性 值 有 none、left、right 和 both， 默 认 值 为 none。 当 多 个 块 状元 素 由 于 第 1 个 设置 
浮动 属性 而 并 列 时 ， 如 果菜 个 元 素 不 需要 被 “ 流 ” 上 去 ， 即 可 设置 相应 的 clear 属性 。 

(3) 在 CSS 布局 中 , position 属性 非常 重要 ,很 多 特殊 容器 的 定位 必须 用 position 来 完 
成 。 通过 使 用 position 属性 , 我 们 可 以 选择 4 种 不 同类 型 的 定位 , 分 别 是 

和 

(4) 当 容 器 的 position 属性 值 为 时， 这 个 容器 即 被 相对 定位 了 。 相 对 定位 和 其 
他 定位 相似 ， 也 是 独立 出 来 浮 在 上 面 。 


2. 操作 题 
使 用 定位 属性 创建 如 图 17-17 所 示 的 页 面 效果 。 





GO- Or een | 
文件 加” 核 得 如 ”查看 如 忆 蒜 到 和) 工具 G) 。 蓝 怠 0 
这 尿 罕 夫 。 厢 3 是 





这 是 位 于 正常 位 置 的 标题 
这 个 标题 相对 于 其 正常 位 署 向 左 移动 


这 个 标题 相对 于 其 正常 位 置 向 右 移动 
相对 定位 会 按照 元 素 的 原 巡 位 置 对 该 元 率 进行 移动 。 

样式 “lcft: -10px” 从 元 系 的 原 闪 大 例 位 置 戌 去 10 像素 
样式 “left:10px” 向 元 素 的 原 寻 左 侧 镁 置 增加 10 修志 








17-17 ”使 用 定位 属性 创建 页 面 
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第 18 章 CSS+DIV 布局 方法 


【学 习 目 标 】 

CSS + DIV 是 网 站 标准 中 常用 的 术语 之 一 ，CSS 和 DIV 的 结构 被 越 来 越 多 的 人 采用 ， 
很 多 人 都 抛弃 了 表格 而 使 用 CSS 来 布局 页 面 ， 它 的 好 处 很 多 ; 可 以 使 结构 简洁 ， 定 位 更 灵 
活 ，CSS 布局 的 最 终 目的 是 搭建 完善 的 页 面 架构 。 利 用 CSS 排版 的 页 面 ， 更 新 起 来 十 分 容 
易 ， 甚 至 连 页 面 的 结构 都 可 以 通过 修改 CSS 属性 来 重新 定位 。 

本 章 主要 内 容 包括 : 

(1) CSS 布局 理念 ; 

(2) 固定 宽度 布局 方法 ; 

(3) 可 变 宽度 布局 方法 ; 

(4) CSS 布局 与 表格 布局 对 比 。 


18.1 CSS 布局 理念 


无 论 使 用 表格 还 是 CSS， 网 页 布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 区 域 里 面 。 有 了 
CSS， 最 常用 来 组 织 内 容 的 元 素 就 是 <div> 标 签 。CSS 排版 是 一 种 很 新 的 排版 理念 ， 首 先 要 
将 页 面 使 用 <div> 整 体 划 分 几 个 板块 ， 然 后 对 各 个 板块 进行 CSS 定位 ， 最 后 在 各 个 板块 中 
添加 相应 的 内 容 。 

在 利用 CSS 布局 页 面 时 ， 首 先 要 有 一 个 整体 的 规划 ， 包 括 整 个 页 面 分 成 哪些 模块 ， 各 
个 模块 之 间 的 父子 关系 等 ,以 最 简单 的 框架 为 例 , 页 面 由 导航 条 (banner)、 主 体内 容 (content)、 
菜单 导航 (links) 和 脚注 (footen) 几 个 部 分 组 成 ， 各 个 部 分 分 别 用 自己 的 id 来 标识 ， 如 图 18-1 
所 示 。 






























































18-1 ”页 面 内 容 框架 
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其 页 面 中 的 HTML 框架 代码 如 下 所 示 。 


<div id="container">container 
<div id="banner">banner</div> 
<div id="content">content</div> 
<div id="links">links</div> 
<div id="footer">footer</div> 
</div> 
实例 中 每 个 板块 都 是 一 个 <div>， 这 里 直接 使 用 CSS 中 的 id 来 表示 各 个 板块 ， 页 面 的 
所 有 <div> 块 都 属于 container， 一 般 的 <div> 排 版 都 会 在 最 外 面 加 上 这 个 父 <div>， 便 于 对 页 
面 的 整体 进行 调整 。 对 于 每 个 <div> 块 ， 还 可 以 再 加 入 各 种 元 素 或 行内 元 素 。 
特别 的 ,如 果 后 期 维护 时 希望 content 的 位 置 与 links 对 调 , 仅 仅 只 需要 将 content 和 1links 
属性 中 的 left 和 right 改变 即 可 。 这 是 传统 的 排版 方式 所 不 可 能 简单 实现 的 ,也 正 是 CSS 排 
版 的 魅力 之 一 。 
另外 ， 如 果 links 的 内 容 比 content 的 长 ， 在 正 浏览 器 上 footer 就 会 贴 在 content 下 方 
而 与 links 出 现 重 合 。 
如 图 18-2 所 示 利用 CSS+DIV 布局 的 网 页 。 


























图 18-2 CSS 布局 


18.2 固定 宽度 布局 


本 节 重 点 介绍 如 何 使 用 DIV+CSS 创建 固定 宽度 布局 , 对 于 包含 很 多 大 图 片 和 其 他 元 素 
的 内 容 ， 由 于 它们 在 流 式 布局 中 不 能 很 好 地 表现 ， 因 此 固定 宽度 布局 也 是 处 理 这 种 内 容 的 
最 好 方法 。 
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18.2.1 1 列 固定 宽度 


1 列 式 布 局 是 所 有 布局 的 基础 ， 也 是 最 简单 的 布局 形式 。1 列 固定 宽度 中 ， 宽度 的 属性 
值 是 固定 像素 。 下 面 举 例 说 明 1 列 固定 宽度 的 布局 方法 ， 具 体 步 又 如 下 。 

(1) 在 HTML 文档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 如 
下 所 示 。 


<style> 





























#content{ 
background-color:#ffcc33; 
border:5px solid #ff3399; 
width:500px; 
height:350px; 


} 
</style> 


[六 提示 : ”使 用 background-color:# ffcc33 将 <div> 设 定 为 黄色 背景 ， 并 使 用 border:5px 
solid #ff3399 将 <div> 设 置 了 粉红 色 的 5px 宽度 的 边框 , 使 用 width:500px 设置 
宽度 为 500px 的 固定 宽度 ， 使 用 height:350px 设置 高 度 为 350px。 

(2) 然后 在 HTML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ， 给 <div> 使 用 

了 content 作为 id 名 称 。 

<div id="content ">1 列 固定 宽度 </div> 
(3) 在 浏览 器 中 浏览 ， 由 于 是 固定 宽度 ， 无论 怎 样 改变 浏览 器 窗口 大 小 ，<div> 的 宽度 
都 不 改变 ， 如 图 18-3 和 图 18-4 所 示 。 








图 18-3 浏览 器 窗口 变 小 效果 图 18-4 浏览 器 窗口 变 大 效果 


1 列 固 定 宽度 是 常见 的 网 页 布局 方式 ,多 用 于 封面 型 的 主页 设计 中 ,如 图 18-5 和 图 18-6 
所 示 的 主页 ， 无 论 怎样 改变 浏览 器 的 大 小 ， 块 的 宽度 都 不 改变 。 
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[名 提示 : 页 面 居 中 是 常用 的 网 页 设计 表现 形式 之 一 ， 传 统 的 表格 式 布 局 中 ， 用 
align="center" 属 性 来 实现 表格 居中 显示 。<div> 本 身 也 支持 align="center" 属 
性 ,同样 可 以 实现 居中 ,但 是 在 Web 标准 化 时 代 , 这 个 不 是 我 们 想 要 的 结果 。 
因为 不 能 实现 表现 与 内 容 的 分 离 。 


MRAGKLESS 


enter site 





图 18-5 1 列 固定 宽度 布局 18-6 1 列 固定 宽度 布局 


18.2.2 ”两 列 固定 宽度 


有 了 1 列 固定 宽度 作为 基础 ， 两 列 固定 宽度 就 非常 简单 ,我们 知道 <div> 用 于 对 某 一 个 
区 域 的 标识 ， 而 两 列 的 布局 ， 自 然 需 要 用 到 两 个 <div>。 

两 列 固定 宽度 非常 简单 ， 两 列 的 布局 需要 用 到 两 个 <div>， 分 别 把 两 个 <div> 的 id 设置 
为 left 与 right， 表 示 两 个 <div> 的 名 称 。 首 先 为 它们 设置 宽度 ， 然 后 让 两 个 <div> 在 水 平 线 
中 并 排 显示 ， 从 而 形成 两 列 式 布局 ， 具 体 步 骤 如 下 。 
(1) 在 HIML 文档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 如 
下 所 示 。 


<style> 

#1left{ 
background-color:#00cc33; 
border:lpx solid #ff3399; 
width:250px; 
height:250px; 
float:left; 

#right{ 
background-color:#ffcc33; 
border:lpx solid #ff3399; 
width:250px; 
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height:250px; 
float:lefty 

} 

</style> 





性 提示 : id 为 left 与 right 的 两 个 <div> 的 代码 与 前 面 类 似 ， 两 个 <div> 使 用 相同 宽度 实 
现 两 列 式 布局 。float 属性 是 CSS 布局 中 非常 重要 的 属性 ， 用 于 控制 对 象 的 浮 
动 布局 方式 ， 大 部 分 <div> 布 局 基本 上 都 通过 float 的 控制 来 实现 。float 使 用 
none 值 时 表示 对 象 不 浮动 ， 而 使 用 left 时 ， 对 象 将 向 左 浮动 ， 例 如 本 例 中 的 
<div> 使 用 了 float:left: 之 后 ，<div> 对 象 将 向 左 浮动 。 


(2) 然后 在 HTML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ,给 div 使 用 left 
和 right 作为 id 名 称 。 

<div id="left"> 左 列 </div> 

<div id="right"> 右 列 </div> 

(3) 在 使 用 了 简单 的 float 属性 之 后 ， 两 列 固 定 宽度 的 <div> 就 能 够 完整 地 显示 出 来 。 
在 浏览 器 中 浏览 ， 如 图 18-7 所 示 为 两 列 固定 宽度 布局 。 

如 图 18-8 所 示 的 网 页 两 列 宽 度 都 是 固定 的 ， 无 论 怎 样 改 变 浏览 器 窗口 大 小 ， 两 列 的 宽 
度 都 不 改变 。 


Welcome to the Mary Valley 


六 六 四 ”本 前 国 ， 查 者 岂 。 届 半天 工具 玫 有 各 
帘 安 大 i 




















图 18-7 ”两 列 固定 宽度 布局 图 18-8 两 列 宽度 都 是 固定 的 
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18.2.3 圆 角 框 


圆 角 框 ， 因 为 其 样式 比 直 角 框 漂亮 ， 所 以 成 为 设计 师 心 中 偏爱 的 设计 元 素 。 现 在 Web 
标准 下 大 量 的 网 页 都 采用 圆 角 框 设 计 ， 成 为 一 道 亮丽 的 风景 线 。 

如 图 18-9 所 示 是 将 其 中 的 一 个 圆 角 进行 放大 后 的 效果 。 从 图 中 我 们 可 以 看 到 其 实 这 种 
圆 角 框 是 靠 一 个 个 容器 堆砌 而 成 的 ， 每 一 个 容器 的 宽度 不 同 ， 这 个 宽度 是 由 margin 外 边 距 
来 实现 的 ， 如 margin:0 Spx: 就 是 左右 两 侧 的 外 边 距 为 5Spx， 从 上 到 下 有 5 条 线 ， 其 外 边 距 分 
别 为 5px，3px，2px，1px， 依 次 递减 。 因 此 根据 这 个 原理 我 们 可 以 实现 简单 的 HTML 结构 
和 样式 。 





























图 角 框 放大 示意 图 


18-9 圆 角 进 行 放大 后 的 效果 


下 面 讲述 圆 角 框 的 制作 过 程 ， 具 体 过 程 如 下 。 
(1) 使 用 如 下 代码 实现 简单 的 HTML 结构 。 
<div class="sharp colorl"> 
<b class="bl"></b><b class="b2"></b><b class="b3"></b><b 
class="b4"></b> 
<div class="content"> 文 字 内 容 </div> 
</div> 
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b 
class="b8"></b> 
</div> 
bl 一 b4 构成 上 面 的 左右 两 个 圆 角 结构 体 ，b5~b8 则 构建 了 下 面 左右 两 个 圆 角 结构 体 。 
而 content 则 是 内 容 主体 ， 将 这 些 全 部 放 在 一 个 大 的 容器 中 ， 并 给 该 容器 一 个 名 字 sharp， 
用 来 设置 通用 的 样式 ， 再 给 它 琶 加 了 一 个 colorl 类 名 , 这 个 类 名 用 来 区 别 不 同 的 颜色 方案 ， 
因为 可 能 会 有 不 同 颜色 的 圆 角 框 。 
(2) 将 每 个 <b> 标 签 都 设置 为 块 状 结构 ， 使 用 如 下 CSS 代码 定义 其 样式 。 
bl, .b2, .b3, .b4, .b5, .b6, .b7, .b8{height:1lpx; font-size:1px; 
overflow:hidden; display:block;} 




































































.bl, .b8{margin:0 5px;} 
.b2, -b7{margin:0 3px;border-right:2px solid; border-left:2px solid;} 
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-b3, .b6{margin:0 2px7border-right:1pX solid; border-left:1px solid;} 





-b4, .b5{margin:0 lpx;border-right:lpx solid; border-left:1px solid; 

height:2px;} 

将 每 个 <b> 标 签 都 设置 为 块 状 结构 ， 并 定义 其 高 度 为 Il px， 超出 部 分 溢出 隐藏 。 从 上 面 
样式 中 我 们 已 经 看 到 margin 值 的 设置 ， 是 从 大 到 小 减少 的 。 而 bl 和 b8 的 设置 是 一 样 ， 已 
经 将 它们 合并 在 一 起 了 ， 同 样 的 原理 ，b2 和 b7、b3 和 b6、b4 和 b5 都 是 一 样 的 设置 。 这 
是 因为 上 面 两 个 圆 和 下 面 两 个 圆 是 一 样 ， 只 是 顺序 是 相对 的 ， 所 以 将 它 合 并 设置 在 一 起 。 
有 利于 减少 CSS 样式 代码 的 字符 大 小 。 后 面 3 句 和 第 2 句 有 点 不 同 的 地 方 是 多 设置 了 左右 
边框 的 样式 ， 但 是 在 这 儿 并 没有 设置 边框 的 颜色 ， 这 是 为 什么 呢 ， 因 为 这 个 边框 颜色 是 需 
要 适时 变化 的 ， 所 以 将 它们 分 离 出 来 ， 在 下 面 的 代码 中 单独 定义 。 

(3) 接 下 使 用 如 下 代码 设置 内 容 区 的 样式 。 


-Content {border-right:lpx solid;border-left:lpx solid;overflow:hidden;} 


也 是 只 设置 左右 边框 线 , 但 是 不 设置 颜色 值 , 它 和 上 面 8 个 <b> 标 签 一 起 构成 圆 角 框 的 
外 边框 轮廓 。 

往往 在 一 个 页 面 中 存在 多 个 圆 角 框 ， 而 每 个 圆 角 框 的 边框 颜色 有 可 能 各 不 相同 ， 有 没 
有 可 能 针对 不 同 的 设计 制作 不 同 的 换 肤 方案 呢 ? 答案 是 有 的 。 在 这 个 应 用 中 ， 可 以 换 不 同 
的 皮肤 颜色 ， 并 且 设 置 颜色 方案 也 并 不 是 一 件 很 难 的 事情 。 

(4) 下 面 看 看 如 何 将 它们 应 用 不 同 的 颜色 .。 将 所 有 的 涉及 边框 色 的 class 名 全 部 集中 在 
一 起 ， 用 群 选择 符 给 它们 设置 一 个 边框 的 颜色 就 可 以 了 。 代 码 如 下 所 示 : 

COLOEY <D2Coleorl .D3;:COLO0rl :DbAr -COLOrl  D5 :CoOLOrt sb6r-colorl -bi, 


.Colorl .content{border-color:#96C2F1;} 
.Colorl .bl,.colorl .b8{background:#96C2F1;} 


需要 将 这 两 句 的 颜色 值 设 置 为 一 样 的 ， 第 二 句 中 虽说 是 设置 的 background 背景 色 , 但 
它 同样 是 上 下 边框 线 的 颜色 ， 这 一 点 一 定 要 记 住 。 因 为 bl 和 b8 并 没有 设置 border， 但 它 
的 高 度 值 为 1px， 所 以 用 它 的 背景 色 就 达到 了 模拟 上 下 边框 的 颜色 了 。 

(5) 现在 已 经 将 一 个 圆 角 框 描绘 出 来 了 ， 但 是 有 一 个 问题 要 注意 ， 就 是 内 容 区 的 背景 
色 ， 因 为 这 里 是 存 载 文 字 主体 的 地 方 。 所 以 还 需要 加 入 下 面 这 句 话 ， 也 是 群集 选择 符 来 设 
置 圆 角 内 的 所 有 背景 色 。 


olorl bb2 "COLGrl .Bb3 COLOEI DECOLOEILED5COLOERESbD6 Coiozi bly 
.Colorl .content{background:#EFF7FF;} 


这 里 除了 bl 和 bg 外 ， 其 他 的 标签 都 包含 进来 了 ， 并 且 包 括 content 容器 ， 将 它们 的 背 
景色 全 部 设置 一 个 颜色 ， 这 样 除了 线 框 外 的 所 有 地 方 都 成 为 一 种 颜色 了 。 在 这 儿 用 到 包含 
选择 符 ， 给 它们 都 加 了 一 个 color1， 这 是 颜色 方案 1 的 class 名 ， 依 照 这 个 原理 可 以 设置 不 
同 的 换 肤 方案 。 

(6) 如 图 18-10 所 示 是 源码 运行 后 的 圆 角 框图 。 
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图 18-10 圆 角 框 


18.3 ”可 变 宽度 布局 


页 面 的 宽窄 布局 迄今 有 两 种 主要 的 模式 ， 一 种 是 固定 宽窄 ， 还 有 一 种 就 是 可 变 宽窄 。 
这 两 种 布局 模式 都 是 控制 页 面 宽度 的 。 上 一 节 讲述 了 固定 宽度 的 页 面 布局 ， 本 节 将 对 可 变 
宽度 的 页 面 布局 做 进一步 的 分 析 。 


18.3.1 1 列 自 适应 


自 适 应 布局 是 在 网 页 设计 中 常见 的 一 种 布局 形式 ， 自 适应 的 布局 能 够 根据 浏览 器 窗口 
的 大 小 ， 自 动 改变 其 宽度 或 高 度 值 ， 是 一 种 非常 灵活 的 布局 形式 ， 良 好 的 自 适应 布局 网 站 
对 不 同 分 辨 率 的 显示 器 都 能 提供 最 好 的 显示 效果 。 自 适应 布局 需要 将 宽度 由 固定 值 改 为 百 
分 比 。 下 面 是 1 列 自 适应 布局 的 CSS 代码 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>1 列 自 适应 </title> 

<style> 

html,body{margin:0; height:100%;} 

#Layer{background-color:#ffcc33;border:5px solid #ff3399; 
width:70%; height:70%;} 

</style> 

</head> 

<body> 

<div id="Layer">1 列 自 适应 </div> 

</body> 

</html> 
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18. 





这 里 将 宽度 和 高 度 值 都 设置 为 70%， 从 浏览 效果 中 可 以 看 到 ，<div> 的 宽度 已 经 变 为 了 


浏览 器 宽度 的 70% 的 值 ， 当 扩大 或 缩小 浏览 器 窗口 大 小 时 ， 其 宽度 和 高 度 还 将 维持 在 与 浏 
览 器 当前 宽度 比例 的 70%。 如 图 18-11 和 图 18-12 所 示 。 







































Frese es [> | 
A i = 5 
OP oe OP =emm 2 
自 适 应 中 总 1%S 适 记 x - 
| 0 

图 18-11 窗口 变 小 图 18-12 窗口 变 大 


自 适 应 布局 是 比较 常见 的 网 页 布局 方式 ， 如 图 18-13 所 示 的 网 页 就 采用 自 适应 布局 。 





18-13” 自 适应 布局 


3.2 ”两 列 宽度 自 适应 
下 面 使 用 两 列 宽度 自 适应 性 ， 来 实现 左右 栏 宽度 自动 适应 ， 自 适应 主要 通过 宽度 的 百 














分 比值 设置 。CSS 代码 修改 为 如 下 。 


从 300 


<style> 

#1left{ 
background-color:#00cc33; border:lpx solid #ff3399; width:60%; 
height:250px; float:left; 
’ 

#right{ 
background-color:#ffcc33;border:1lpx solid #ff3399; width:30%; 
height:250px; float:left; 

} 

</style> 


这 里 主要 修改 了 左 栏 宽度 为 60%， 右 栏 宽 度 为 30%。 在 浏览 器 中 浏览 效果 如 图 18-14 

















都 不 改变 。 





18-14 ”浏览 器 窗口 变 小 效果 
如 图 18-16 所 示 的 网 页 采用 两 列 宽度 自 适 应 布局 。 
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图 18-16 ”两 列 宽度 自 适应 布局 
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18.3.3 ”两 列 右 列 宽度 自 适 应 


在 实际 应 用 中 , 有 时 候 需 要 左 栏 固 定 宽度 , 右 栏 根据 浏览 器 窗口 大 小 自动 适应 , 在 CSS 
中 只 需要 设置 左 栏 的 宽度 即 可 ， 如 上 例 中 左右 栏 都 采用 了 百分比 实现 了 宽度 自 适应 ， 这 里 
只 需要 将 左 栏 宽度 设 定 为 固定 值 ， 右 栏 不 设置 任何 宽度 值 ， 并 且 右 栏 不 浮动 ，CSS 样式 代 
码 如 下 。 


<style> 
#1left{ 
background-color:#00cc33;border:lpx solid #ff3399; width:200px; 
height:250px; 
EarleEE 
#right{ 
background-color:#ffcc33;border:lpx solid #ff3399; height:250px; 





} 

</style> 

这 样 ， 左 栏 将 呈现 200px 的 宽度 ,而 右 栏 将 根据 浏览 器 窗口 大 小 自动 适应 如 图 18-17 
和 图 18-18 所 示 。 
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18-17” 右 列 宽度 自 适应 18-18” 右 列 宽度 自 适应 


18.3.4 3 列 浮动 中 间 宽 度 自 适应 


使 用 浮动 定位 方式 ， 从 1 列 到 多 列 的 固定 宽度 及 自 适 应 ， 基 本 上 可 以 简单 完成 ， 包 括 
3 列 的 固定 宽度 。 而 在 这 里 给 我 们 提出 了 一 个 新 的 要 求 ， 希 望 有 一 个 3 列 式 布局 ， 其 中 左 
栏 要 求 固定 宽度 ， 并 居 左 显示 ， 右 栏 要 求 固定 宽度 并 居 右 显示 ， 而 中 间 栏 需要 在 左 栏 和 右 
栏 的 中 间 ， 根 据 左 右 栏 的 间距 变化 自动 适应 。 

在 开始 这 样 的 3 列 布局 之 前 ， 有 必要 了 解 一 个 新 的 定位 方式 一 绝对 定位 。 前 面 的 浮 
动 定位 方式 主要 由 浏览 器 根据 对 象 的 内 容 自 动 进行 浮动 方向 的 调整 ， 但 是 当 这 种 方式 不 能 
满足 定位 需求 时 ， 就 需要 用 新 的 方法 来 实现 ，CSS 提供 的 除去 浮动 定位 之 外 的 另 一 种 定位 
方式 就 是 绝对 定位 ， 绝 对 定位 使 用 position 属性 来 实现 。 
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下 面 讲述 3 列 浮动 中 间 宽 度 自 适应 布局 的 创建 ， 有 具体 操作 步骤 如 下 。 

(1) 在 HTML 文档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 如 
下 所 示 。 

<style> 

body{ margin:0px; } 


#1left{ 
background-color:#ffcc00; border:3px solid #333333; width:100px; 


height:250px; position:absolute; top:0px; left:0Opx; 





} 
#centert{ 
background-color:#ccffcc; border:3px solid #333333; height:250px; 


margin-left:100px; margin-right:100px; } 


#right{ 
background-color:#ffcc00; border:3px solid #333333; width:100px; 


height:250px; position:absolute; right:0px; top:0px; } 
</style> 
(2) 在 HTML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ， 给 div 使 用 left、 
right 和 center 作为 id 名 称 。 


<div id="left"> 左 列 </div> 
<div id="center"> 中 间 列 </div> 
<div id="right"> 右 列 </div> 


(3) 在 浏览 器 中 浏览 ， 如 图 18-19 和 图 18-20 所 示 。 
| | - 5 本 
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图 18-19 ”中间 宽度 自 适应 18-20 ”中 间 宽 度 自 适应 














如 图 18-21 所 示 的 网 页 采用 3 列 浮动 中 间 宽 度 自 适应 布局 。 


























ao 纪 





HTML+DIV+CSS 网 页 设计 与 布局 实用 教程 








CHRIS 


Web Design & (raphics 





18-21 ”3 列 浮动 中 间 宽 度 自 适应 布局 


18.3.5 3 行 2 列 居 中 高 度 自 适应 


如 何 使 整个 页 面 内 容 居中 ， 如 何 使 高 度 适应 内 容 自动 伸缩 。 这 是 学 习 CSS 布局 最 常见 


的 问题 。 下 面 讲述 3 行 2 列 居 中 高 度 自 适应 布局 的 创建 ， 具 体操 作 步 又 如 下 。 


(1) 在 HIML 文档 的 <head> 与 </head> 之 间 相 应 的 位 置 输入 定义 的 CSS 样式 代码 ， 如 


下 所 示 。 


<style type="text/css"> 

#header{ width:776px; margin-right: auto; margin-left: auto; padding: Opx; 
background: #ff9900; height:60px; text-align:left; } 
#contain{margin-right: auto; margin-left: auto; width: 776px; } 
#mainbg{width:776px; padding: Opx;background: #60A179; float: left;} 
#right{float: right; margin: 2px Opx 2px Opx; padding:0px; width: 574px; 
background: #ccd2de; text-align:left; } 

#1left{ float: left; margin: 2px 2px Opx Opx; padding: Opx; 

background: #F2F3F7; width: 200px; text-align:left; } 

#footer{ clear:both; width:776px; margin-right: auto; margin-left: auto; 
padding: Opx; 

background: #ff9900; height:60px;} 

.text {margin:0px;padding:20px;} 

</style> 


(2) 在 HIML 文档 的 <body> 与 <body> 之 间 的 正文 中 输入 以 下 代码 ， 给 <div> 使 用 left、 


right 和 center 作为 id 名 称 。 
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<div id="header"> 页 眉 </div> 
<div id="contain"> 
<div id="mainbg"> 
<div id="right"> 
<div class="text"> 右 
<div id="header"> 页 眉 </div> 





| 第 18 瘟 CSS+DIV 布局 方法 
lI 





<div id="contain"> 
<div id="mainbg"> 
<div id="right"> 
<div class="text"> 右 
<p>gnbsp; </p> 
<p>gnbsp;</p> 
<p>&nbsp; </p> 
<p></p> 
<p></p> 
</div> 
</div> 
<div id="left"> 
<div class="text"> 左 </div> 
</div> 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</div> 
<div id="left"> 
<div class="text"> 左 </div> 
</div> 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 












































G) 在 浏览 器 中 浏览 ， 如 图 18-22 所 示 。 
-°°En 
(®e) 由 三 行 二 列 居 直 并 所 后 安 市 司 html FE AN 
全 =5= 列 居中 高 度 所 通 记 布 .。 -志恒 mm i ey 
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图 18-22 3 行 2 列 居 中 高 度 自 适应 布局 
如 图 18-23 所 示 的 网 页 采用 3 行 2 列 居中 高 度 自 适应 布局 。 
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18-23 3 行 2 列 居中 高 度 自 适应 布局 


18.4 ”CSS 布局 与 传统 的 表格 方式 布局 分 析 


表格 在 网 页 布局 中 应 用 已 经 有 很 多 年 了 ， 由 于 多 年 的 技术 发 展 和 经 验 积累 ，Web 设计 
工具 功能 不 断 增强 ， 使 表格 布局 在 网 页 应 用 中 达到 登峰造极 的 地 步 。 

由 于 表格 不 仅 可 以 控制 单元 格 的 宽度 和 高 度 ， 而 且 还 可 以 嵌 套 ， 多 列表 格 还 可 以 把 文 
本 分 栏 显示 ， 于 是 就 有 人 试 着 在 表格 中 放置 其 他 网 页 内 容 ， 如 图 像 、 动 画 等 ， 以 打破 比较 
固定 的 网 页 版 式 。 而 网 页 表格 对 无 边框 表格 的 支持 为 表格 布局 葛 定 了 基础 ， 用 表格 实现 页 
面 布局 慢 慢 就 成 了 一 种 设计 习惯 。 

传统 表格 布局 的 快速 与 便捷 加 速 了 网 页 设计 师 对 于 页 面 创意 的 激情 ， 而 忽视 了 代码 的 
理性 分 析 。 迄 今 为 止 ， 表格 仍然 主导 着 视觉 丰富 的 网 站 的 设计 方式 ， 但 它 却 阻碍 了 一 种 更 
好 的 、 更 有 亲和力 的 、 更 灵活 的 ， 而 且 功能 更 强大 的 网 站 设计 方法 。 

使 用 表格 进行 页 面 布局 会 带 来 很 多 问题 。 

@ ”把 格式 数据 混入 内 容 中 ， 这 使 得 文件 的 大 小 无 谓 地 变 大 ， 而 用 户 访问 每 个 页 面 时 

都 必须 下 载 一 次 这 样 的 格式 信息 。 

@ ”这 使 得 重新 设计 现 有 的 站 点 和 内 容 极为 消耗 时 间 且 昂贵 。 

@ 使 保持 整个 站 点 的 视觉 的 一 致 性 极 难 ， 花 费 也 极 高 。 

@ ”基于 表格 的 页 面 还 大 大 降低 了 它 对 残疾 人 和 用 手机 或 PDA 的 浏览 者 的 亲和力 。 

而 使 用 CSS 进行 网 页 布局 会 : 

@ ”使 页 面 载 入 得 更 快 。 

@ ”降低 流量 费用 。 
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在 修改 设计 时 更 有 效率 而 代价 更 低 。 
帮助 整个 站 点 保持 视觉 的 一 致 性 。 
让 站 点 可 以 更 好 地 被 搜索 引擎 找到 。 
使 站 点 对 浏览 者 和 浏览 器 更 具 亲 和 力 。 

为 了 帮助 读者 更 好 地 理解 表格 布局 与 标准 布局 的 优 务 ， 下 面 结合 一 个 案例 进行 详细 分 
析 。 如 图 18-24 所 示 是 一 个 简单 的 空白 布局 模板 ， 它 是 一 个 3 行 3 列 的 典型 网 页 布局 。 下 
面 尝试 用 表格 布局 和 CSS 标准 布局 来 实现 它 ， 亲 身体 验 二 者 的 异同 。 
































18-24 3 行 3 列 的 典型 网 页 布局 


实现 图 18-24 所 示 的 布局 效果 ， 使 用 表格 布局 的 代码 如 下 : 


<table width="760" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="80" colspan="3" bgcolor="#cc3300">gnbsp;</td> 
WEE> 
<Er> 
<td width="133" height="226" bgcolor="#cccccc">&nbsp;</td> 
<td width="531" height="380" bgcolor="#FF99FF">&nbsp;</td> 
<td width="96" bordercolor="#cccccc" bgcolor="#cccccc">gnbsp;</td> 
SEE 
<tr> 
<td height="80" colspan="3" bgcolor="#663300">gnbsp;</td> 
区 EC 
</table> 























使 用 CSS 布局 ， 其 中 XHTML 框架 代码 如 下 : 








<div id="wrap"> 
<div id="header"> </div> 
<div id="main"> 
<div id="bar 1"></div> 
<div id="content"></div> 
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<div id="bar r"></div> 
</div> 
<div id="footer"></div> 
</div> 


CSS 布局 代码 如 下 : 


<style> 
body {/* 定义 网 页 窗口 属性 ， 清 除 页 边 距 ， 定 义 居中 显示 */ 


padding:0; margin:0 auto; text-align:center; 





} 
#wrap{/* 定义 包含 元 素 属性 ， 固 定 宽度 ， 定 义 居中 显示 */ 
width:780px; margin:0 auto; 


} 

#header{/* 定义 页 眉 属性 */ 
width:100%;/* 与 父 元 素 同 宽 */ 
height:74px; /* 定义 固定 高 度 */ 
background:#cc3300; /* 定义 背景 色 */ 
color:#F0DFDB; /* 定义 字体 颜色 */ 


} 

#main {/* 定义 主体 属性 */ 
width:100%; 
height:400px; 

} 

#bar_1,#bar_r{/* 定义 左右 栏 属性 */ 
width:160px; height:100%; 
float:left; /* 浮动 显示 ， 可 以 实现 并 列 分 布 */ 
background:#cccccc; 


overflow:hidden; /* 隐藏 超出 区 域 的 内 容 */ 


} 
#content{ /* 定义 中 间 内 容 区 域 属性 */ 
width:460px; height:100%; float:left; overflow:hidden; background:#fff; 


a /* 定义 页 脚 属性 */ 
background:#663300; width:100%; height:50px; 
clear:both; /* 清除 左右 浮动 元 素 */ 
es 
简单 比较 ， 感 觉 不 到 CSS 布局 的 优势 ， 甚 至 书写 的 代码 比 表 格 布局 要 多 得 多 。 当 然 这 
仅 是 一 页 框架 代码 。 让 我 们 做 一 个 很 现实 的 假设 ， 如 果 你 的 网 站 正 采 用 了 这 种 布局 ， 有 一 
天 客户 把 左 侧 通 栏 宽度 改 为 100px。 那 么 将 在 传统 的 表格 布局 的 网 站 中 打开 所 有 的 页 面 逐 
个 进行 修改 ， 这 个 数目 少 则 有 几 十 页 ， 多 则 上 千 页 ， 劳 动 强度 可 想 而 知 。 而 在 CSS 布局 中 
只 需 简单 修改 一 个 样式 属性 就 可 以 。 
这 仅 是 一 个 假设 ， 实 际 中 的 修改 会 比 这 更 频繁 、 更 多 样 。 不 只 客户 会 三 番 五 次 地 出 难 
题 挑战 你 的 耐性 ， 甚 至 自己 有 时 都 会 否定 刚刚 完成 的 设计 。 
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1 cssovima 
当然 未 来 的 网 页 设计 中 ， 表 格 的 作用 依然 不 容 忽 视 ， 不 能 因为 有 了 CSS， 我 们 就 一 棒 

子 把 它 打 死 。 不 过 ， 表 格 会 日 渐 恢复 表格 的 本 来 职能 一 一 数据 的 组 织 和 显示 ， 而 不 是 让 表 

格 承载 网 页 布局 的 重任 。 








本 章 小 结 


在 本 章 中 ， 以 几 种 不 同 的 布局 方式 演示 了 如 何 灵 活 地 运用 CSS 的 布局 性 质 ， 使 页 面 按 
照 需 要 的 方式 进行 排版 。 希 望 读 者 能 彻底 理解 和 掌握 本 章 的 内 容 ， 这 就 需要 反复 多 试验 几 
次 ， 把 本 章 的 实例 彻底 搞 清楚 。 这 样 在 实际 工作 中 遇 到 具体 的 案例 时 ， 就 可 以 灵活 地 选择 
解决 方法 。 


练 习 题 
1. 填空 题 
(1) CSS 排版 是 一 种 很 新 的 排版 理念 ， 首 先 要 将 页 面 使 用 整体 划分 几 个 板 
块 ， 然 后 对 各 个 板块 进行 定位 ， 最 后 在 各 个 板块 中 添加 相应 的 内 容 。 


(2) 在 利用 CSS 布局 页 面 时 , 首先 要 有 一 个 整体 的 规划 ,包括 整个 页 面 分 成 哪些 模块 ， 
各 个 模块 之 间 的 父子 关系 等 。 以 最 简单 的 框架 为 例 ， 页 面 由 
和 几 个 部 分 组 成 ， 各 个 部 分 分 别 用 自己 的 id 来 标识 。 


2. 操作 题 


(1) CSS 布局 与 传统 的 表格 布局 相 比 有 哪些 优点 ? 
(2) 制作 一 个 3 列 浮动 中 间 宽 度 自 适 应 布局 的 网 页 ， 要 求 左右 两 边 的 <div> 宽 度 为 
100px， 中 间 <div> 的 宽度 自 适应 ， 如 图 18-25 所 示 。 








文件 @) 记得 于) 下 者 妇 中 当天 工具 中 替 助 只 
语 注入 天 Ex 和 二 = 














图 18-25 ”3 列 浮动 中 间 宽 度 自 适应 布局 
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【学 习 目标 】 

CSS 3 是 CSS 技术 的 升级 版 本 ，CSS 3 语言 开发 是 朝 着 模块 化 发 展 的 。 以 前 的 规范 作 
为 一 个 模块 实在 是 太 庞大 而 且 比较 复杂 ， 所 以 ， 把 它 分 解 为 一 些小 的 模块 ， 更 多 新 的 模块 
也 被 加 入 进来 。 这 些 模块 包括 : 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模块 、 背 景 和 边 
框 、 文 字 特 效 、 多 栏 布局 等 。 

本 章 主要 内 容 包括 : 

(1) 了 解 CSS 3 的 发 展 历史 ; 

(2) 了 解 CSS 3 新 增 特 性 ; 

(3) 掌握 CSS 3 代码 的 应 用 。 


19.1 预览 激动 人 心 的 CSS 3 


随 着 用 户 要 求 的 不 断 提高 、 各 种 新 型 网 络 应 用 的 不 断 出 现 以 及 Web 技术 自身 的 高 速 发 
展 ，CSS 2 在 Web 开发 中 显得 越 来 越 力不从心 ， 人 们 对 下 一 代 CSS 技术 和 标准 一 一 CSS 3 
的 需求 越 来 越 迫切 。 


19.1.1 CSS 3 的 发 展 历史 


20 世纪 90 年 代 初 ，HTML 语言 诞生 ， 各 种 形式 的 样式 表 也 开始 出 现 。 各 种 不 同 的 浏 
览 器 结合 自身 的 显示 特性 , 开发 了 不 同 的 样式 语言 ， 以 便于 读者 自己 调整 网 页 的 显示 效果 。 
注意 ， 此 时 的 样式 语言 仅 供 读者 使 用 ， 而 非 供 设计 师 使 用 。 

早期 的 HTML 语言 只 含有 很 少量 的 显示 属性 ,用 来 设置 网 页 和 字体 的 效果 。 随 着 HTML 
的 发 展 ， 为 了 满足 网 页 设计 师 的 要 求 ，HTML 不 断 添加 了 很 多 用 于 显示 的 标签 和 属性 。 由 
于 HTML 的 显示 属性 和 标签 比较 丰富 ， 其 他 的 用 来 定义 样式 的 语言 就 越 来 越 没有 意义 了 。 

在 这 种 背景 下 ，1994 年 年 初 哈 坤 。 利 提出 了 CSS 的 最 初 想法 。 伯 特 。 波 斯 (Bert Bos) 
当时 正在 设计 一 款 Argo 浏览 器 ， 于 是 他 们 一 拍 即 合 ， 决 定 共 同 开发 CSS。 当 然 ， 这 时 市 面 
上 已 经 有 一 些 非 正 式 的 样式 表 语 言 的 提议 了 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 波斯 一 
起 再 次 展示 这 个 建议 。 当 时 W3C 刚刚 建立 ，W3C 对 CSS 的 发 展 很 感 兴趣 ， 它 为 此 组 织 了 
一 次 讨论 会 。 哈 坤 、 波 斯 和 其 他 一 些 人 是 这 个 项 目的 主要 技术 负责 人 。1996 年 年 底 ，CSS 
已 经 完成 。1996 年 12 月 CSS 的 第 一 个 版 本 问世 。 

1998 年 5 月 ，CSS 2 正式 发 布 。CSS 2 是 一 套 全 新 的 样式 表 结 构 ， 是 由 W3C 推行 的 ， 
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同 以 往 的 CSS 1 或 CSS 1.2 完全 不 一 样 ，CSS 2 推荐 的 是 一 套 内 容 和 表现 效果 分 离 的 方式 ， 
HTML 元 素 可 以 通过 CSS 2 的 样式 控制 显示 效果 ， 可 完全 不 使 用 以 往 HTML 中 的 <table> 
和 <td> 来 定位 表单 的 外 观 和 样式 ， 只 需 使 用 <div> 和 <l> 此 类 HTML 标签 来 分 割 元 素 ， 之 后 
即 可 通过 CSS 2 样式 来 定义 表单 界面 的 外 观 。 
早 在 2001 年 5 月 ，W3C 就 开始 着 手 准备 开发 CSS 第 3 版 规范 。CSS 3 规范 一 个 新 的 
特点 是 规范 被 分 为 若干 个 相互 独立 的 模块 。 一 方面 分 成 若干 较 小 的 模块 较 利于 规范 及 时 更 
新 和 发 布 ， 及 时 调整 模块 的 内 容 ， 这 些 模 块 独立 实现 和 发 布 ， 也 为 日 后 CSS 的 扩展 莫 定 了 
基础 。 另 一 方面 ， 由 于 受 支持 设备 和 浏览 器 厂商 的 限制 ， 设 备 或 者 厂商 可 以 有 选择 地 支持 
一 部 分 模块 ， 支 持 CSS 3 的 一 个 子 集 。 这 样 将 有 利于 CSS 3 的 推广 。 
CSS 3 的 产生 大 大 简化 了 编程 模型 ， 它 不 是 仅 对 已 有 功能 的 扩展 和 延伸 ， 而 更 多 的 是 
对 Web UI 设计 理念 和 方法 的 革新 。 相 信 未 来 CSS 3 配合 HTML 5 标准 ， 将 引起 一 场 极 大 
的 Web 应 用 的 变革 ， 甚 至 是 整个 Intemet 产业 的 变革 。 


19.1.2 ”CSS 3 新 增 特性 


CSS 3 中 引入 了 新 特性 和 新 功能 ， 这 些 新 特性 极 大 地 增强 了 Web 程序 的 表现 能 力 ， 同 
时 简化 了 Web UI 的 编程 模型 。 下 面 将 详细 介绍 这 些 CSS 3 的 新 增 特性 。 


1 强大 的 选择 器 


CSS 3 的 选择 器 在 CSS 2.1 的 基础 上 进行 了 增强 ， 它 允许 设计 师 在 标签 中 指定 特定 的 
HTML 元 素 而 不 必 使 用 多 余 的 class、id 或 者 JavaScript 脚本 。 

如 果 和 希望 设计 出 简洁 、 轻 量 级 的 网 页 标签 ， 希 望 结构 与 表现 更 好 地 分 离 ， 高 级 选择 器 
是 非常 有 用 的 。 它 可 以 大 大 地 简化 我 们 的 工作 ， 提 高 我 们 的 代码 效率 ， 并 让 我 们 很 方便 地 
制作 高 可 维护 性 的 页 面 。 

2.， 半 透 明度 效果 的 实现 

RGBA 不 仅 可 以 设 定 色彩 ， 还 能 设 定 元 素 的 透明 度 。 无 论 是 文本 、 背 景 还 是 边框 均 可 
使 用 该 属性 。 该 属性 的 语法 在 支持 其 浏览 器 中 相同 。 

RGBA 颜色 代码 示例 : 

background:rgba(252, 253, 202, 0.70); 

上 面 代码 中 ， 前 3 个 参数 分 别 是 R、G、B 三 原色 ,范围 是 0~255。 第 4 个 参数 是 背 
景 透明 度 ， 范 围 是 0 一 1， 如 0.70 代表 透明 度 70%。 这 个 属性 使 我 们 在 浏览 器 中 也 可 以 做 到 
像 Win7 一 样 的 半 透 明 玻 璃 效果 ， 如 图 19-1 所 示 。 



































19-1 ， 半 透明 度 效果 
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目前 支持 RBGA 颜色 的 浏览 器 有 : Safari 4+、Chrome 1+、Firefox 3.0.5+ 和 Opera 9.5+， 


3. 多 栏 布局 


正 全 系列 浏览 器 暂 都 不 支持 该 属性 。 


新 的 CSS 3 选择 器 可 以 让 你 不 必 使 用 多 个 <div> 标 签 就 能 实现 多 栏 布局 。 浏览 器 解释 这 


个 属性 并 生成 多 栏 ， 让 文本 实现 一 个 仿 报纸 的 多 栏 结 构 。 如 图 19-2 所 示 网 页 显示 为 3 栏 ， 
这 3 栏 并 非 浮动 的 <div> 而 是 使 用 CSS 3 多 栏 布局 。 

















”cm - Deform 


四 是 = 
硬 一 


@ Testimonials 


Online Chat 


4. 多 背景 图 





Our Client 


图 19-2 多 栏 布局 


CSS 3 允许 背景 属性 设置 多 个 属性 值 ， 如 background-image、background-repeat、 
background-size 、background-position、background-originand、background-clip 等 ， 这 样 就 可 
以 在 一 个 元 素 上 添加 多 层 背景 图 片 。 

在 一 个 元 素 上 添加 多 背景 的 最 简单 的 方法 是 使 用 简写 代码 ， 你 可 以 指定 上 面 的 所 有 属 
性 到 一 条 声明 中 ， 


div { 





只 是 最 常用 的 还 是 image、position 和 repeat， 如 下 所 示 代 码 。 


background: url (example.jpg) top left no-repeat, 


Url (example2.jpg) bottom left no-repeat, 


url (example3.jpg) center center repeat-y; 


} 


5. 圆 角 
CSS 3 新 功能 














P 最 常用 的 一 项 就 是 圆 角 效果 ,border-radius 无 须 背景 图 片 就 能 给 HIML 
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元 素 添 加 圆 角 。 不 同 于 添加 JavaScript 或 多 余 的 HTML 标签， 仅仅 需要 添加 一 些 CSS 属 
性 并 从 好 的 方面 考虑 。 这 个 方案 是 清晰 和 有 效 的 ， 而 且 可 以 让 你 免 于 花费 几 个 小 时 来 寻找 
精巧 的 浏览 器 方案 和 基于 JavaScript 的 圆 角 。 

border-radius 的 使 用 方法 如 下 : 


border-radius: 5px 5px 5px Spx; 

radius， 就 是 半径 的 意思 。 用 这 个 属性 可 以 很 容易 地 做 出 圆 角 效果 ， 当 然 ， 也 可 以 做 出 
圆 形 效果 。 如 图 19-3 所 示 为 CSS 3 制作 的 圆 角 表格 。 

目前 还 9、WebKit 核心 浏览 器 、Firefox 3+ 都 支持 该 属性 。 




















Recent Articles 





19-3 CSS 3 制作 的 圆 角 表 格 


6. 边框 图 片 


border-image 属性 允许 在 元 素 的 边框 上 设 定 图 片 , 这 使 得 原本 单调 的 边框 样式 变 得 丰富 
起 来 。 让 你 从 通常 的 solid、dotted 和 其 他 边框 样式 中 解放 出 来 。 该 属性 给 设计 师 一 个 更 好 
的 工具 ， 用 它 可 以 方便 地 定义 设计 元 素 的 边框 样式 ， 比 background-image 属性 或 枯燥 的 默 
认 边 框 样式 更 好 用 。 也 可 以 明确 地 定义 一 个 边框 可 以 被 如 何 缩放 或 平 铺 。 

border-image 的 使 用 方法 如 下 : 


border: S5px solid #cccccc; 
border-image: url(/images/border-image.png)5 repeat; 


如 图 19-4 所 示 为 CSS 3 制作 的 边框 图 片 。 





19-4 CSS 3 制作 的 边框 图 片 
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7. 形变 效果 


通常 使 用 CSS 和 HTML 我 们 是 不 可 能 使 HTML 元 素 旋转 或 者 倾斜 一 定 角度 的 。 为 了 
使 元 素 看 起 来 更 具有 立体 感 ， 我 们 不 得 不 把 这 种 效果 做 成 一 个 图 片 ， 这 样 就 限制 了 很 多 动 
态 的 应 用 场景 ,transform 属性 的 引入 使 我 们 以 前 通常 要 借助 SVG 等 矢量 绘图 手段 才能 实现 
的 功能 , 只 需要 一 个 简单 的 CSS 属性 就 能 实现 .在 CSS 3 中 transform 属性 主要 包括 rotate( 旋 
转 )、scale( 缩 放 )、translate( 坐 标 平移 )、skew( 坐 标 倾斜 )、matrix( 和 矩阵 变换 )。 如 图 19-5 所 示 
为 对 元 素 的 形变 效果 。 





图 19-5 ”对 元 素 的 形变 效果 


目前 支持 形变 的 浏览 器 有 WebKit 系列 浏览 器 、Firefox 3.5+、Opear 10.5+。IE 全 系列 
不 支持 。 


8. 媒体 查询 


媒体 查询 (media queries) 可 以 让 你 为 不 同 的 设备 基于 它们 的 能 力 定义 不 同 的 样式 。 如 在 
可 视 区 域 小 于 400px 的 时 候 ， 想 让 网 站 的 侧 栏 显 示 在 主 内 容 的 下 边 ， 这 样 它 就 不 应 该 浮动 
并 显示 在 右 侧 了 。 


#sidebar { 
float: right; 
display: inline; 
} 
@media all and (max-width:400px) { 
#sidebar { 
float: none; 
clear: both; 
} 
} 


也 可 以 指定 使 用 滤 色 屏 的 设备 : 


af 





Color: grey; 
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| 
Q@media screen and (color) { 
| 
color: red; 
} 
} 


这 个 属性 是 很 有 用 的 ， 因 为 不 用 再 为 不 同 的 设备 写 独 立 的 样式 表 了 ， 而 且 也 无 须 使 用 
JavaScript 来 确定 每 个 用 户 的 浏览 器 的 属性 和 功能 。 一 个 实现 使 一 个 灵活 的 布局 更 加 流行 的 
基于 JavaScript 的 方案 是 使 用 智能 的 流体 布局 ， 让 布局 对 于 用 户 的 浏览 器 分 辨 率 适 应 更 加 

媒体 查询 被 基于 WebKit 核心 的 浏览 器 和 Opera 支持 ,在 Firefox 3.5 版 本 中 支持 它 , 下 
目前 不 支持 这 些 属性 。 


9. CSS 3 线性 渐变 


渐变 色 是 网 页 设计 中 很 常用 的 一 项 元 素 ， 它 可 以 增强 网 页 元 素 的 立体 感 ， 同 时 使 单一 
颜色 的 页 面 看 起 来 不 是 那么 突 光 。 过 去 为 了 实现 渐变 色 通常 需要 先 制作 一 个 渐变 的 图 片 ， 
将 它 切割 成 很 细 的 一 小 片 ， 然 后 使 用 背景 重复 使 整个 HTML 元 素 拥 有 渐变 的 背景 色 。 这 样 
做 有 两 个 次 端 : 为 了 使 用 图 片 背景 ， 很 多 时 候 使 得 本 身 简单 的 HIML 结构 变 得 复杂 ; 另外 
受制 于 背景 图 片 的 长 度 或 宽度 ，HTML 元 素 不 能 灵活 地 动态 调整 大 小 。CSS 3 中 WebKit 
和 Mozilla 对 渐变 都 有 强大 的 支持 ， 如 图 19-6 所 示 为 使 用 CSS 3 制作 的 渐变 背景 图 。 























19-6 使 用 CSS 3 制作 的 渐变 背景 图 
从 上 面 的 效果 图 可 以 看 出 ， 线 性 渐变 是 一 个 很 强大 的 功能 。 使 用 很 少 的 CSS 代码 就 能 














做 出 以 前 需要 使 用 很 多 图 片 才能 完成 的 效果 。 很 可 惜 的 是 目前 支持 该 属性 的 浏览 器 只 有 最 
新 版 的 Safari、Chrome、Firefox， 且 语法 差异 较 大 。 


19.1.3 ”主流 浏览 器 对 CSS 3 的 支持 
CSS 3 带 来 了 众多 全 新 的 设计 体验 ， 但 是 并 不 是 所 有 浏览 器 都 完全 支持 它 。 当 然 ， 网 
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页 不 需要 在 所 有 浏览 器 中 看 起 来 都 严格 一 致 ， 有 时 候 在 某 个 浏览 器 中 使 用 私有 属性 来 实现 
特定 的 效果 是 可 行 的 。 


下 面 介 绍 使 用 CSS 3 的 注意 事项 。 





CSS 3 的 使 用 不 应 当 影 响 页 面 在 各 个 浏览 器 中 的 正常 显示 。 可 以 使 用 CSS 3 的 一 
些 属性 来 增强 页 面 表现 力 和 用 户 体 验 ， 但 是 这 个 效果 提升 不 应 当 影响 其 他 浏览 器 
用 户 正常 访问 该 页 面 。 
同一 页 面 在 不 同 浏览 器 中 不 必 完 全 显示 一 致 。 功 能 较 强 的 浏览 器 ， 页 面 可 以 显示 
得 更 炫 一 些 ， 而 较 弱 的 浏览 器 可 以 显示 得 不 是 那么 酷 ， 只 要 能 完成 基本 的 功能 就 
行 。 大 可 不 也 ,为 了 在 各 个 浏览 器 中 得 到 同样 的 现实 效果 而 大 费 周章。 

在 不 支持 CSS 3 的 浏览 器 中 ， 可 以 使 用 替代 方法 来 实现 这 些 效果 ， 但 是 需要 平衡 
实现 的 复杂 度 和 实现 的 性 能 问题 。 


19.2 使 用 CSS 3 实现 圆 角 表格 




















传统 的 圆 角 生 成 方案 ， 必 须 使 用 多 张 图 片 作为 背景 图 案 。CSS 3 的 出 现 ， 使 得 我 们 再 
也 不 必 浪 费时 间 去 制作 这 些 图 片 了 ， 而 且 还 有 其 他 许多 优点 : 





减少 维护 的 工作 量 。 图 片 文件 的 生成 、 更 新 ， 编 写 网 页 代码 ， 这 些 工作 都 不 再 需 
要 了 。 

提高 网 页 性 能 。 由 于 不 必 再 发 出 多 余 的 HTTP 请 求 ， 网 页 的 载 入 速度 将 变 快 。 
增加 视觉 可 靠 性 。 某 些 情况 下 (网 络 拥堵 、 服 务 器 出 错 、 网 速 过 慢 等 )， 背 景 图 片 
会 下 载 失 败 ， 导 致 视觉 效果 不 佳 。CSS 3 就 不 会 发 生 这 种 情况 。 


CSS 3 圆 角 只 需 设 置 一 个 属性 : border-radius。 为 这 个 属性 提供 一 个 值 ， 就 能 同时 设置 
4 个 圆 角 的 半径 。CSS 度量 值 都 可 以 使 用 em、ex、pt、px、 百 分 比 等 。 
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是 使 用 CSS 3 实现 圆 角 表格 的 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 圆 角 效 果 border-radius</title> 
<style 

Eype="text/css”> 
body,div{margin:0;padding:0;} 
.bordert{ 


width:400px; 

border:20px solid #019F00; 

height:100px; 

-moz-border-radius:15px; /* 仅 Firefox 支持 ， 实 现 圆 角 效果 */ 
-webkit-border-radius:15px7y /* 仅 Safari,Chrome 支持 ， 实 现 圆 角 效果 */ 
-khtml-border-radius:15px; /* 仅 Safari,Chrome 支持 ， 实 现 圆 角 效果 */ 
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border-radius:15px; /* 仅 Opera，Safari,Chrome 支持 ， 实 现 圆 角 效果 */ 


} 

</style> 

</head> 

<body> 

<p>&nbsp; </p> 

<div class="border"> 圆 角 表格 </div> 
</body> 

</html> 


border-radius 可 以 同时 设置 1 一 4 个 值 。 如 果 设 置 1 个 值 , 表示 4 个 圆 角 都 使 用 这 个 值 。 
如 果 设 置 两 个 值 ， 表 示 左 上 角 和 右 下 角 使 用 第 1 个 值 ， 右 上 角 和 左下 角 使 用 第 2 个 值 。 如 
果 设 置 3 个 值 ， 表 示 左 上 角 使 用 第 1 个 值 ， 右 上 角 和 左下 角 使 用 第 2 个 值 ， 右 下 角 使 用 第 
3 个 值 。 如 果 设 置 4 个 值 ， 则 依次 对 应 左上 角 、 右 上 角 、 右 下 角 、 左 下 角 ( 顺 时 针 顺 序 )。 

除 卫 和 傲游 外 ， 目 前 有 Firefox，Safari，Chrome，Opera 支持 该 属性 ， 其 中 Safari、 
Chrome、Opera 是 支持 最 好 的 。 在 Firefox 浏览 器 中 浏览 效果 如 图 19-7 所 示 。 








叹 口 x 
© BESET op - ¢ | © ARborder-radi.. x 
文件 朋 。 妨 沪 (EF) 到 看 (V) 收 写 交 {A) 工具 (]) 帮助 (H) 
R006 





图 19-7 设置 CSS 链接 样式 


我 们 还 可 以 随意 指定 圆 角 的 位 置 , 上 左 , 上 右 , 下 左 , 下 右 4 个 方向 。 在 Firefox, WebKit 
内 核 的 Safari，Chrome 和 Opera 的 具体 书写 格式 如 下 。 

上 左 效果 代码 如 下 所 示 ， 其 浏览 效果 如 图 19-8 所 示 。 

-moz-border-radius-topleft :15px; 

—webkit-border-top-left-radius :15px; 

border-top-left-radius :15px; 

同样 的 还 有 其 他 几 个 方向 的 圆 角 ， 这 里 就 不 再 一 一 举例 了 。 注 意 虽然 各 大 浏览 器 基本 
都 支持 border-radius， 但 是 在 某 些 细 节 上 ,实现 都 不 一 样 。 当 4 个 角 的 颜色 、 宽 度 、 风 格 ( 实 
线 框 、 虚 线 框 等 )、 单 位 都 相同 时 ， 所 有 浏览 器 的 泻 染 结果 基本 一 致 ; 一 旦 4 个 角 的 设置 不 
相同 ， 就 会 出 现 很 大 的 差异 。 因 此 ， 目 前 最 安全 的 做 法 ， 就 是 将 每 个 圆 角 边框 的 风格 和 宽 
度 ， 都 设 为 一 样 的 值 ， 并 且 避 免 使 用 百分比 值 。 
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文件 疙 各 (E) ”查看 (V) ”收音 夫 (A) 工具 (T) 帮助 (H) 








图 19-8 上 左 圆 角 表格 


19.3 ”使 用 CSS 3 制作 图 片 滚动 菜单 


鼠标 移 到 图 片上 之 后 ， 根 据 鼠 标的 移动 ， 图 片 会 跟随 滚动 ， 因 使 用 CSS 3 的 部 分 属性 ， 
所 以 需要 Firefox 或 Chrome 内 核 的 浏览 器 才能 看 到 真正 效果 ,如 图 19-9 所 示 ， 有 具体 制作 步 
又 如 下 。 











文件 (四 ” 问 强 (日 可 看 V) 历 安 (S) 
他 火 匈 主 天 











19-9 CSS 3 制作 图 片 滚动 菜单 
(1) 首先 使 用 <div> 插 入 5 幅 图 片 ， 如 图 19-10 所 示 。 其 HIML 结构 代码 如 下 所 示 。 
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<div class="sc menu wrapper"> 

<div class="sc menu"> 
"><img src="1.jpg" width="196" height="188" /></a> 
<a href=""><img src="2.jpg" width="196" height="188" /></a> 
<a href=""><img src="3.jpg" width="196" height="188" /></a> 
<a href=""><img src="4.jpg" width="196" height="188" /></a> 
<a href=""><img src="5.jpg" width="196" height="188" /></a> 
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(2) 在 <head> 和 </head> 间 输入 以 下 代码 , 使 用 如 下 CSS 代码 定义 图 片 的 外 观 样 式 , 如 
图 19-11 所 示 。 


<style type="text/css"> 
body {background: #0F0DOD; 
padding: 30px 0 0 50px; color:#FFFFFF;} 
div.sc menu wrapper { position: relative; 
height: 500px; 
width: 190px; 
margin-top: 30px; 
overflow: auto;} 
div.sc menu { padding: 15px 0;} 
.sc_ menu a {display: block; 
margin-bottom: 5px; 
width: 130px; 
border: 2px rgb(79, 79, 1719) solids 
—webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
Color: #fff; 
background: rgb(79, 79, 79); } 
.SC menu a:hover { 
border-color: rgb(130, 130, 130); 
border-style: dotted;} 
.SC menu img { 


319 纪 





HTML+DIV+CSS 网 页 设计 与 布局 实用 教程 





display: block; 
border: none;} 
.SC _ menu wrapper .loading { 
position: absolute; 
EOBY SOpXs 
left: 10px; 
margin: 0 auto; 
padding: 1l0px; 
width: 100px; 
—webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
text-align: center; 
color: #fff; 
border: 1lpx solid rgb(79, 79, 79); 
background: #1F1D1D;} 
.SC menu tooltip { 
display: block; 
position: absolute; 
padding: 6px; 
font-size: 12px; 
colors #4EfES 
-Webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border: lpx solid rgb(79, 79, 79); 
background: rgb(0, 0, 0); 
background: rgba(0, 0, 0, 0.5);} 
#back {margin-left: 8px; 
color: gray7 
font-size: 18px; 
text-decoration: none;} 
#back:hover { 
text-decoration: underline;} 
</style> 


Ta ame en a 
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19-11 ”定义 图 片 外 观 
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(3) 在 <head> 和 </head> 间 输入 以 下 代码 ， 使 用 JavaScript 制作 网 页 特效 ， 如 图 19-12 
所 示 。 


<script type= "text/javascript"> 














function makeScrollable (wrapper, scrollable){ 
Var Wrapper = $ (wrapper), scrollable = $(scrollable); 
scrollable.hide(); 
var loading = $('<div 
class="loading">Loading...</div>') .appendTo (wrapper); 
Var interval = setInterval (function(){ 
Var images = scrollable.find('img'); 
var completed = 0; 
images.each (function(){ 
if (this.complete) completed++;}); 
if (completed == images.1length){ 
ClearInterval (interval); 
setTimeout (function(){ 
loading.hide(); 
wrapper.css({overflow: 'hidden'}); 
scrollable.slideDown('slow', function(){ 
enable (); 
DD); 
}, 1000); 
} 
jr LO00hs 
function enable(){ 
var inactiveMargin = 99; 
Var wrapperWidth = wrapper.width(); 
Var wrapperHeight = wrapper.height (); 
Var scrollableHeight = scrollable.outerHeight () +2*inactiveMargin; 
Var tooltip = $('<div class="sc menu tooltip"></div>') 
.css('opacity', 0) 
-appendTo (wrapper); 
scrollable.find('a') .each (function (){ 
$ (this) .data('tooltipText', this.title); 
DD); 
scrollable.find('a') .removeAttr('title'); 
scrollable.find('img') .removeAttr('alt'); 
var lastTarget; 
wrapper.mousemove (function (e){ 
lastTarget = e.target; 
Var wrapperOffset = wrapper.offset (); 
Var tooltipLeft = e.pageXx - wrapperOffset.left; 
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); 
//tooltip.outerWidth()); 
Var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop () - 40; 
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if (e.pageY - wrapperOffset.top < wrapperHeight/2){ 
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tooltipTop += 80; 





} 
tooltip.css({top: tooltipTop, left: tooltipLeft}); 
vartop = (e.pageY- wrapperoffset.top) * (scrollableHeight - wrapperHeight) 
EoD < ON 
top = 0;} 

wrapper.scrollTop (top); 

nD); 

Var interval = setInterval (function(){ 
if (!lastTarget) return; 
Var currentText = tooltip.text (); 


if (lastTarget.nodeName == 'IMG'){ 
Var newText = $ (lastTarget) .parent () .data('tooltipText'); 
if (currentText != newText) { 
tooltip 
.stop(true) 


.Css('opacity', 0) 
.text (newText) 
.animate ({opacity: 1}, 1000); 


} 
}, 200); 
wrapper.mouseleave (function(){ 
lastTarget = false; 
tooltip.stop (true) .css('opacity', 0).text(''); 
DD); 


} 
$(function(){ makescrollable("div.sc menu wrapper", "div.sc menu");}); 
</script> 


[| 
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19-12 ”定义 图 片 效果 
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19.4 使 用 CSS 3 制作 文字 立体 效果 


CSS 3 的 功能 真 的 很 强大 ， 总 能 制作 出 一 些 令 人 吃惊 的 效果 ， 下 面 制作 很 棒 的 CSS 3 
文字 立体 效果 ， 如 图 19-13 所 示 ， 用 鼠标 选中 文字 ， 效 果 更 清晰 ， 具 体制 作 步骤 如 下 。 








zs 
19-13 使 用 CSS 3 制作 文字 立体 效果 


(1) 打开 原始 网 页 ,在 <head> 和 </head> 间 输入 如 下 CSS 代码 ,用 来 定义 文字 投影 效果 ， 
如 图 19-14 所 示 。 


<style> 

.list case left{ 

position: absolute; 

left: 43px; 

font-size: 60px; 

font-weight: 800; 

color: #fff; 

text-shadow: 1px Opx #009807, 1px 2px #006705, 3px 1px#009807, 2px 3px #006705, 
4px 2px #009807, 4px 4px #006705, Spx 3px #009807, Spx 5px #006705, 

7px 4px #009807, 6px 6px #006705, 8px Spx #009807, 7px 7px #006705, 

9px 6px #009807, 9px 8px #006705, llpx 7px #009807, lO0px 9px #006705, 
12px 8px #009807, llpx 10px #006705, 13px 9px #009807, 12px 11px #006705, 
15px 10px #009807, 13px 12px #006705, 19px 11px #009807, 15px 13px #006705, 
17px 12px #009807; 

top: 130px; 

} 

</style> 


(2) 在 网 页 正文 中 输入 如 下 代码 ， 插 入 文字 ， 如 图 19-15 所 示 。 


<div class="list case left"> 
<strong style="color: #d9ff83"> 一 诺 茶 行 </strong> 
</div> 
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图 19-14 输入 CSS 代码 
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图 19-15 输入 文字 


19.5 使 用 CSS 3 制作 多 彩 的 网 页 图 片 库 


利用 纯 CSS 可 以 做 出 千变万化 的 效果 ,特别 是 CSS 3 的 引入 更 是 让 更 多 的 效果 可 以 做 
出 来 。 现 在 就 让 我 们 动手 做 一 个 多 彩 的 图 片 库 ， 如 图 19-16 所 示 ， 将 鼠标 放置 到 图 像 中 
可 以 显示 出 另外 几 张 图 像 。 
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图 19-16 多 彩 的 网 页 图 片 库 
(1) 首先 在 <body> 和 </body> 中 输入 以 下 CSS 代码 来 插入 9 张 图 片 ， 效 果 如 图 19-17 






所 示 。 
<div class="albums-tab"> 
<div class="albums-tab-thumb sim-anim-9"> 
<img x1.jpg" width="280" height="280" class="all studio"/> 
<img x2.jpg" width="280" height="280" class="all studio"/> 
<img x3.jpg" width="280" height="280" class="all studio"/> 
<img src="x4.jpg" width="280" height="280" class="all studio"/> 
<img src="x5.jpeg" width="280" height="280" class="all studio"/> 
<img src="x7.jpg" width="280" height="280" class="all studio"/> 
<img src="x6.jpg" width="280" height="280" class="all studio"/> 
<img src="x8.jpg" width="280" height="280" class="all studio"/> 
<img src="x9.jpg" width="280" height="280" class="all studio"/> 
</div> 
<div class="albums-tab-text"> 鼠 标 放 图 片上 显示 另外 8 张 图 像 </div> 
</div> 


uamcmmnfparmion “EEC SEC 
中 


示 | i 








图 19-17 插入 图 像 效果 
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(2) 在 <head> 和 </head> 中 输入 样式 代码 ， 用 来 定义 图 像 效 果 ， 如 图 19-18 所 示 。 


<style> 





.sim-anim-91{ 
position: relative; 
—webkit-perspective: 500px; /* Chrome, Safari, Opera */ 
perspective: 500px; 
} 

.Sim-anim-9 img{ 
position: absolute; 
—webkit-transition: all 0.5s; 
=moz~transition: .all O58 
=O=Eransition: al 1 055 
transition: all 0.5s; 
left: 395px; 
top: 162px; 
} 

.Sim-anim-9:hover img{ 
z-index: ll: 
} 

.Sim-anim-9:hover img:nth-child(1){ 
-ms-transform: translate(0,75%) scale(0.7,0.7) FrotateX(10deg) 
-webkit-transform: translate(0,75%) scale(0.7,0.7) rotatex(l0deg); 
transform: translate(0,75%) scale(0.7,0.7) rotatex(l0deg); 
E 

.Sim-anim-9:hover img:nth-child(2){ 
-ms-transform: translate(72%,75%) scale(0.7,0.7) rotatex(l0deg); 
-webkit-transform: translate(72%,75%) scale(0.7,0.7) rotatexX(10deg) 
transform: translate(72%,75%) scale(0.7,0.7) rotatex(l0deg); 
} 

.Sim-anim-9:hover img:nth-child(3){ 
-ms-transform: translate(-72%,75%) scale(0.7,0.7) rotatex(l0deg); 
-webkit-transform: translate(-72%,75%) scale(0.7,0.7) rotatex(1l0deg); 
transform: translate(-72%,75%) scale(0.7,0.7) rotatex(l0deg); 
} 

.Sim-anim-9:hover img:nth-child(4){ 
-ms-transform: translate(-72%,0) scale(0.7,0.7) rotatex(l0deg); 
—webkit-transform: translate(-72%,0) scale(0.7,0.7) rotatex(l0deg); 
transform: translate(-72%,0) scale(0.7,0.7) rotatex(l0deg); 
} 

.Sim-anim-9:hover img:nth-child(5){ 
-ms-transform: translate(72%,0) scale(0.7,0.7) rotatex(l0deg); 
-webkit-transform: translate(72%,0) scale(0.7,0.7) rotatex(l0deg); 
transform: translate(72%,0) scale(0.7,0.7) rotatex(l0deg); 
} 

.Sim-anim-9:hover img:nth-child(6){ 
-ms-transform: translate(72%,—-70%) scale(0.7,0.7) rotatex(l0deg); 
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-webkit-transform: translate (72%,—70%) scale(0.7,0.7) rotateX(10deg) 
transform: translate(72%,—-70%) scale(0.7,0.7) rotatex(l0deg); 
} 
.Sim-anim-9:hover img:nth-child(7){ 
-ms-transform: translate(-72%,-70%) scale(0.7,0.7) rotateX(10deg) ; 
-webkit-transform: translate(-72%,-70%) scale(0.7,0.7) 
rotatex(10deg); 
transform: translate(-72%,-70%) scale(0.7,0.7) rotatex(1l0deg); 
} 
.Sim-anim-9:hover img:nth-child(8){ 
-ms-transform: translate(0,-70%) scale(0.7,0.7) rotatex(l0deg); 
-webkit-transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg) ; 
transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg) 7 
.Sim-anim-9:hover img:nth-child(9){ 
-ms-transform: scale(0.7,0.7) rotatex(l0deg); 
-webkit-transform:scale(0.7,0.7) rotateX(10deg) ; 
transform: scale(0.7,0.7) rotatex(l0deg); 
} 
body {background-color: #FFB7B8;} 
</style> 
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本 章 小 


CSS 3 提供 了 一 系列 强大 的 功能 ， 如 许多 新 的 CSS 属性 (文字 、 布 局、 颜色 等 )， 各 种 
CSS 特效 ， 甚 至 还 支持 CSS 动画 、 元 素 的 变换 。 这 些 CSS 新 特性 在 现 阶段 可 以 说 都 是 非常 
强大 和 完善 的 ， 只 需要 加 入 几 行 简单 的 CSS 代码 便 可 以 实现 一 系列 令 人 眼前 一 亮 的 效果 ， 
这 比 我 们 之 前 用 JavaScript 去 模拟 这 样 的 效果 要 好 得 多 ， 不 仅 降 低 了 复杂 度 ， 变 得 易 维护 ， 
在 性 能 上 也 突飞猛进 了 。 本 章 只 是 讲述 了 简单 的 基础 知识 。 
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练 习 题 


1 

1 

1 

| 

1 

， 1. 填空 是 

(1) CSS 3 中 引入 了 新 特性 和 新 功能 .这 些 新 特性 极 大 地 增强 了 Web 程序 的 表现 能 力 ， 
1 同时 简化 了 的 编程 模型 。 

| (2) CSS 3 国 角 只 需 设 置 一 个 属性 : 。 为 这 个 属性 提供 一 个 值 ， 就 能 
| 同时 设置 4 个 圆 角 的 半径 。CSS 度量 值 都 可 以 使 用 em、ex、pt、px、 百 分 比 等 。 

1 

| 2. 操作 题 


设计 一 个 多 级 导航 菜单 ， 如 图 19-19 所 示 。 


DE D+ c| racewese 
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19-19 ”多 级 导航 效果 
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第 20 章 设计 和 制作 适合 手机 浏览 的 网 页 


【学 习 目 标 】 

随 着 手机 端 承 载 的 信息 越 来 越 多 ， 移 动 网 站 的 设计 也 逐渐 被 重视 ， 移 动 网 站 一 度 成 为 
热潮 。 手 机 的 屏幕 大 小 是 有 限 的 ， 所 以 这 就 使 得 移动 端 网 页 一 定 要 简单 但 是 却 要 够 夺目 、 
够 吸引 人 。 简 单 即 是 简单 明了 ， 因 为 简单 ， 打 开 的 速度 也 会 更 快 。 网 站 的 信息 内 容 要 能 够 
精彩 夺目 ， 以 便利 用 户 轻松 看 到 。 这 样 处 处 为 用 户 思考 的 网 站 必定 更 简单 被 认可 和 承受 。 


20.1 怎样 进行 网 站 策划 


如 果 网 站 策划 得 好 可 以 说 已 经 成 功 一 半 了 ， 甚 至 会 事半功倍 ， 在 以 后 的 运营 中 会 省 掉 
很 多 麻烦 。 如 果 网 站 建设 前 期 不 做 好 网 站 策划 ， 等 网 站 运营 到 一 定 的 程度 时 就 会 发 现 网 站 
有 很 多 问题 ， 投 入 很 多 却 不 见效 果 。 下 面 讲述 怎样 进行 网 站 策划 。 
20.1.1 网 站 策划 的 原则 


网 站 失败 的 原因 各 不 相同 ， 但 是 成 功 的 原因 却 有 着 相似 的 策划 理念 。 如 果 想 要 使 自己 
的 网 站 成 功 ， 就 得 借鉴 其 他 网 站 成 功 的 经 验 ， 以 下 这 些 原则 是 一 个 成 功 网 站 必 不 可 少 的 
前 提 。 


1. 保持 网 页 的 朴素 





阱 ， 即 把 所 有 可 能 用 到 的 网 页 技巧 ， 如 飘浮 广告 、 网 页 特效 、GIF 动画 等 都 用 上 。 使 用 一 
些 网 页 技巧 无 可 厚 非 ， 但 如 果 多 了 的 话 就 会 让 访问 者 眼花 综 乱 ， 不 知 所 措 ， 也 不 会 给 他 们 
留 下 很 深 的 印象 。 当 要 使 用 一 个 技术 时 ， 记 住 先 问 一 问 自己 : 在 网 页 上 加 入 这 个 技术 有 什 
么 价值 ? 是 否 能 更 好 地 向 访问 者 表达 网 站 的 主题 ? 


2. 简单 有 效 


许多 人 会 被 网 站 的 奇特 效果 所 迷惑 ， 而 忽视 了 信息 的 有 效 性 。 保 持 简 单 的 真正 含义 就 
是 : 如 何 使 网 站 的 信息 与 访问 者 所 需要 的 一 样 。 应 该 把 技术 和 效果 用 在 适当 的 地 方 ， 即 用 
在 有 效 信息 上 ， 让 访问 者 关注 他 们 想 要 的 东西 。 


3. 了 解 用 户 
发 布 网 站 的 目的 就 是 希望 网 民 浏览 , 而 这 些 网 民 就 是 网 站 的 用 户 。 越 了 解 网 站 的 用 户 ， 
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网 站 影响 力 就 会 越 大 。 如 果 用 户 希望 听 到 优美 的 音乐 ， 那 么 就 在 网 页 上 添加 合适 的 背景 音 
乐 。 一 个 好 站 点 的 定义 是 : 通过 典雅 的 风格 设计 提供 给 潜在 用 户 高 质量 的 信息 。 


4. 清晰 的 导航 


对 一 个 好 的 网 站 来 说 ， 清 晰 的 导航 也 是 最 基本 的 标准 。 应 该 让 访问 者 知道 在 网 站 中 的 
位 置 ， 并 且 愉 快 地 通过 导航 的 指引 浏览 网 站 。 例 如 可 以 做 到 的 一 件 事情 就 是 “下 一 步 ” 的 
选择 数目 尽量 少 ， 以 便 用 户 不 会 迷失 在 长 长 的 选择 项 目 列表 中 。 

5. 快捷 


让 用 户 在 获取 信息 时 不 要 超过 3 次 点 击 。 当 访问 者 在 访问 一 个 网 站 时 , 如 果 点 击 了 七 八 
ss E 找 到 想 要 的 信息 ， 或 者 还 没 找到 ， 他 肯定 会 离开 你 的 网 站 去 别 的 网 站 查找 了 ， 而 且 
能 再 也 不 会 来 你 的 网 站 了 。 访问 者 进入 网 站 后 , 他 应 该 可 以 不 费力 地 找到 所 需要 的 资料 。 


6. 30 秒 的 等 待 时 间 

有 一 条 不 成 文 的 法 则 : 当 访 问 者 在 决定 下 一 步 该 去 哪 之 前 ， 不 要 让 他 在 当前 所 处 页 T 
的 下 载 时 间 超 过 30 秒 。 保 证 页 面 有 个 适度 的 大 小 而 不 会 被 无 限制 地 下 载 。 

7. 平衡 
平衡 是 一 个 好 网 站 设计 的 重要 部 分 ， 如 文本 和 图 像 之 间 的 平衡 、 背 景 图 像 和 前 景 内 容 
之 间 的 平衡 。 

8. 测试 


一 定 要 在 多 种 浏览 器 、 多 种 分 辩 率 下 测试 每 个 网 页 。 现 在 Firefox 用 户 越 来 越 多 ， 至 少 
要 在 Firefox 和 Internet Explorer 下 都 测试 一 遍 。 


9. 学 习 


网 站 风格 、 页 面 设 计 只 是 网 站 策划 的 一 小 部 分 内 容 ， 必 须 有 好 的 网 站 策划 思想 才能 策 
划 出 好 的 页 面 ， 因 为 页 面 是 用 户 体验 的 一 个 重要 部 分 。 网 站 策划 与 设计 是 一 个 不 断 学 习 的 
过 程 ,技术 和 工具 在 不 断 进步 , 现在 又 流行 DIV+CSS 了 , 网 民 的 上 网 习惯 及 方式 也 在 不 断 
变化 ， 这 一 切 都 需要 我 们 不 断 学 习 、 不 断 进 步 。 


20.1.2 ”网 站 策划 的 关键 点 

网 站 策划 是 网 站 能 够 成 功 的 一 个 关键 因素 。 在 网 站 策划 中 ， 有 两 个 核心 关键 点 最 需要 
注意 。 

1. 不 受 经 验 约束 

网 站 策划 没有 固定 的 模式 ， 重 要 的 是 符合 商业 的 战略 目标 。 很 多 策划 人 员 在 策划 会 员 
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管理 的 注册 流程 时 ， 喜 欢 把 注册 流程 简化 ， 目 的 就 是 为 了 让 用 户 能 够 很 快 就 注册 完毕 。 但 
是 ,这 并 不 适合 所 有 网 站 。 成 立 于 1999 年 的 rent.com 是 美国 最 受 欢 迎 的 公寓 租赁 网 站 , 2005 
年 2 月 rent.com 被 eBay 以 4.33 亿美 元 收购 。 后 来 有 人 总 结 它 成 功 的 一 个 重要 因素 ， 就 是 
它 比 其 他 租赁 网 站 有 着 更 为 繁复 的 用 户 注 册 流 程 ，rent.com 在 用 户 注册 流程 上 收集 了 比 其 
他 租赁 网 站 更 多 的 顾客 信息 。 这 样 做 带 来 的 好 处 是 rent.com 的 用 户 成 交 率 大 大 提高 。 

当然 并 不 是 说 所 有 网 站 都 应 该 这 样 做 ， 重 要 的 是 根据 每 个 网 站 的 经 营 目标 来 定 。 像 一 
些 Web 2.0 的 网 站 ， 并 不 需要 为 每 个 用 户 定制 服务 ， 也 就 没有 必要 去 搜集 那些 用 不 上 的 信 
息 。 而 rent.com 这 样 的 网 站 需要 通过 注册 搜索 到 用 户 的 很 多 信息 ， 这 些 信息 可 以 为 用 户 提 
供 差异 化 的 服务 。 


2. 系统 思维 


先 举 个 例子 ，1997 年 ， 世 界 卫 生 组 织 宣布 要 在 非洲 消灭 症 疾 。 但 是 8 年 后 ， 非 洲 的 症 
疾 发 病 率 整整 提高 了 几 倍 。 为 什么 初衷 很 好 ， 但 造成 的 后 果 却 更 加 严重 呢 ? 原因 是 世界 卫 
生 组 织 在 制定 目标 之 后 ， 开 始 大 量 采购 一 家 日 本 公司 的 药品 ， 使 当地 生产 症 疾 药物 的 厂商 
倒闭 ， 进 而 导致 当地 一 种 可 以 治疗 症 疾 的 植物 无 人 种 植 ， 结 果 预 防 症 疾 的 天 然 药 物 由 此 消 
失 。 管 理学 大 师 彼 得 。 圣 吉 总 结 认为 ， 造 成 这 个 结果 的 重要 原因 在 于 没有 系统 性 地 思考 ， 
只 治标 不 治本 。“ 他 们 没有 看 到 种 棉花 的 农民 也 在 其 中 起 作用 ， 更 没有 意识 到 预防 症 疾 的 
天 然 药物 到 底 起 什么 作用 ， 外 来 的 系统 如 果 不 考虑 原来 体系 的 话 就 只 能 是 适得其反 。” 

对 于 互联 网 策划 而 言 ， 道 理 是 一 样 的 ， 系 统 思维 就 在 推出 功能 点 并 做 出 决策 时 ， 需 要 
考虑 所 有 的 因素 。 一 个 功能 可 能 从 一 个 方面 看 上 去 会 给 用 户 带 来 价值 ， 但 是 从 另外 一 个 角 
度 或 从 长 久 来 看 ， 是 不 是 有 价值 ， 这 就 需要 找到 平衡 点 ， 进 而 找到 解决 问题 的 关键 。 


20.2 网 站 的 定位 


做 网 站 时 ， 首 先 要 解决 两 个 问题 : 一 是 网 站 有 没有 定位 ; 二 是 网 站 定位 是 不 是 合适 。 
如 果 不 能 够 用 一 句 话 来 概括 网 站 是 做 什么 的 ， 那 么 网 站 就 没有 清晰 的 定位 。 网 站 有 定位 也 
不 一 定 是 对 的 ， 定 位 于 一 个 竞争 激烈 的 市 场 或 者 已 经 饱和 的 市 场 ， 跟 没有 定位 是 没有 差别 
的 。 所以， 一 个 网 站 不 仅 要 有 定位 ， 而 且 要 有 一 个 差异 化 的 定位 。 不 是 为 了 差异 化 而 差异 
化 ， 而 是 为 了 目标 用 户 群 的 需求 而 差异 化 ， 为 了 市 场 空间 的 不 同 而 差异 化 。 

有 清晰 而 合适 的 定位 ， 本 身 就 是 一 种 竞争 的 优势 ， 能 比 对 手 少 走 弯路 ， 以 更 少 的 资源 
做 更 多 的 事 ， 所 以 也 比 竞争 对 手 跑 得 更 快 、 走 得 更 远 。 

在 网 站 发 展 的 初始 阶段 ， 网 站 的 目标 最 好 要 够 小 ， 小 并 不 一 定 就 不 好 ， 大 并 不 一 定 就 
好 。 目 标 很 高 远 ， 定 位 很 宏大 ， 并 不 代表 网 站 就 能 达到 定位 希望 实现 的 目标 。 为 了 实现 大 
目标 ， 最 好 从 小 目标 开始 。 

定位 小 目标 ， 也 不 是 否定 将 来 的 大 目标 。 精 确 的 定位 反而 有 利于 网 站 的 进一步 发 展 ， 
因为 在 不 同 的 发 展 阶段 定位 是 可 以 变化 的 。 

网 站 目标 定位 不 仅 要 小 ， 而 且 还 需要 找到 一 个 基点 ， 这 个 点 是 网 站 创立 、 发 展 、 壮 大 
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的 依靠 点 ， 像 迅雷 以 下 载 为 基点 、 百 度 以 搜索 为 基点 等 。 刚 开始 时 ， 这 个 点 可 能 很 小 ， 但 
是 网 站 发 展 壮大 之 后 ， 就 可 以 繁衍 出 无 数 的 应 用 。 如 果 一 开始 点 太 大 太 多 ， 什 么 都 想 做 ， 
什么 都 不 肯 放 弃 ， 最 后 的 结果 将 是 什么 都 得 不 到 。 

确定 网 站 的 定位 ， 就 要 找到 这 个 基点 ， 需 要 从 以 下 3 个 方面 考虑 : 第 一 ， 要 有 良好 的 
性 价 比 的 市 场 空 间 ;， 第 二 ， 网 站 定位 必须 考虑 用 户 的 新 需求 :第 三 ， 相 比 于 竞争 对 手 应 具 
有 独特 优势 。 


1. 网 站 定位 必须 考虑 市 场 前 景 ， 找 到 性 价 比 高 的 市 场 空间 


如 果 现 在 做 门户 网 站 ， 也 许 投入 上 亿 元 ， 都 不 能 保证 做 得 好 。 因 为 这 个 市 场 经 过 多 年 
的 发 展 ， 基 本 格局 已 经 定 下 来 了 ， 要 跻身 门户 的 行列 ， 需 要 花费 大 量 的 人 力 、 资 金 和 资源 ， 
也 不 一 定 能 建立 起 来 。 用 户 的 习惯 、 门 户 本 身 的 优势 都 不 是 一 天 建立 起 来 的 ， 这 都 是 长 期 
积累 的 结果 。 

确定 网 站 的 定位 要 找到 性 价 比 高 的 市 场 。 什 么 是 性 价 比 高 的 市 场 ? 我 们 从 用 户 的 需求 
考虑 这 个 问题 。 比 如 率先 进入 网 络 销售 钻石 等 B2C 领域 。 当 初 hao123 的 网 址 导航 网 站 是 
性 价 比 高 的 典型 例子 。 


2. 网 站 定位 必须 考虑 用 户 的 新 需求 


用 户 的 需求 分 为 已 满足 的 需求 和 尚未 满足 的 需求 。 进 入 已 充分 满足 需求 的 领域 ， 成 本 
将 会 非常 高 ， 如 果 能 找到 用 户 未 被 满足 的 需求 ， 进 入 成 本 就 会 大 大 降低 ， 而 网 站 成 功 的 可 
能 性 也 会 增 大 。 如 率先 进入 了 某 些 行业 的 网 络 B2C 直销 服务 。 


3. 网 站 定位 必须 考虑 竞争 对 手 ， 找 到 独特 的 竞争 优势 


网 站 要 有 独特 的 优势 ， 如 当初 的 Google 搜索 引擎 ， 这 是 竞争 对 手 一 时 难以 企及 的 。 拥 
有 了 这 些 独特 的 竞争 优势 ， 网 站 也 会 迅速 成 长 起 来 。 

总 之 ， 前 面 的 几 点 可 以 总 结 为 一 点 ， 那 就 是 用 户 价值 。 能 够 提供 给 用 户 价值 的 网 站 最 
终 都 能 实现 商业 价值 的 转化 。 最 后 ， 在 确定 网 站 定位 之 前 ， 可 以 反思 一 下 : 如 果 网 站 这 样 
定位 能 给 用 户 提供 什么 样 的 价值 ? 这 个 价值 是 不 是 用 户 需要 的 ? 如 果 需 要 ， 有 多 少 用 户 需 
要 它 ? 用户 是 不 是 愿意 为 它 付 钱 ? 这 样 的 价值 是 不 是 其 他 网 站 已 经 提供 了 ? 这 样 的 价值 是 
不 是 其 他 网 站 也 很 容易 提供 ? 


20.3 ”确定 网 站 的 目标 用 户 


当中 小 企业 投资 建立 企业 网 站 后 ， 有 很 多 的 中 小 企业 每 天 都 在 关注 企业 网 站 的 流量 ， 
想 知道 每 天 能 有 多 少 人 在 查询 网 站 内 容 ， 以 此 来 推断 企业 网 站 的 作用 ， 流 量 越 多 则 说 明成 
交 的 机 会 越 多 ; 也 有 部 分 的 中 小 企业 更 注重 通过 网 站 来 得 到 目标 用 户 。 得 到 更 多 的 目标 用 
户 ， 就 说 明 增 加 了 生意 的 成 交 概 率 。 不 过 ， 到 底 是 流量 重要 还 是 用 户 重要 呢 ? 

很 多 网 站 经 营 者 不 知道 网 站 的 目标 用 户 群 在 哪里 ， 更 不 用 说 了 解 网 站 的 目标 群 了 。 而 
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这 又 恰 愉 是 一 个 决定 网 站 质量 的 直接 因素 。 不 要 只 是 育 目 地 做 网 站 ， 要 花 点 时 间 弄 清楚 网 
站 的 目标 用 户 群 ， 进 一 步 了 解 他 们 ， 让 网 站 发 挥 更 大 的 作用 。 
选择 好 目标 用 户 ， 做 起 网 站 来 也 就 更 明确 了 。 了 解 用 户 需要 什么 ， 才 能 更 好 地 为 用 户 
服务 。 只 有 针对 目标 用 户 ， 网 站 的 作用 才能 得 到 更 好 的 发 挥 。 如 果 只 是 为 了 流量 而 投入 太 
大 ， 那 就 太 不 值得 了 。 试 想 如 果 浏 览 者 不 是 目标 用 户 ， 网 站 没有 他 想 要 的 东西 ， 他 再 次 来 
的 机 会 就 很 渺茫 了 。 这 样 的 点 击 可 谓 真正 的 “无 效 点 击 ”。 而 我 们 要 的 是 有 效 点 击 ， 只 有 
有 效 的 点 击 才能 给 网 站 带 来 效益 。 网 站 必须 有 明确 的 目标 用 户 群 ， 才 能 充分 发 挥 网 站 的 作 
用 ， 实 现 效益 最 大 化 。 





20.4 网 站 的 内 容 策划 


网 站 的 内 容 策 划 ， 就 是 策划 网 站 需要 什么 样 的 内 容 ， 内 容 以 什么 样 的 方式 产生 、 以 什 
么 样 的 方式 组 织 。 这 里 所 指 的 网 站 内 容 策划 包括 了 网 站 整体 架构 的 策划 ， 同 时 也 包括 具体 
栏目 、 板 块 、 功 能 的 策划 ， 产 品 和 服务 的 详细 功能 、 规 则 及 流程 也 属于 网 站 的 内 容 策划 。 


20.4.1 网 站 内 容 策划 的 重要 性 


首先 一 个 成 功 的 网 站 一 定 要 注重 外 观 布 局 。 外 观 是 给 用 户 的 第 一 印象 ， 给 浏览 者 留 下 
一 个 好 的 印象 ， 那 么 他 看 下 去 或 再 次 光顾 的 可 能 性 才 会 更 大 。 但 是 一 个 网 站 要 想 留 住 更 多 
的 用 户 ， 最 重要 的 还 是 网 站 的 内 容 。 网 站 内 容 是 一 个 网 站 的 灵魂 ， 内 容 做 得 好 ， 做 到 有 自 
己 的 特色 ， 才 会 脱颖而出 。 做 内 容 一 定 要 做 出 自己 的 特点 。 当 然 有 一 点 需要 注意 的 是 不 要 
为 了 差异 化 而 差异 化 ， 只 有 满足 用 户 核心 需求 的 差异 化 才 是 有 效 的 ， 否 则 跟 模 仿 其 他 网 站 
功能 没有 实质 的 区 别 。 

一 般 的 网 站 都 讲究 实用 ， 有 用 才 是 最 重要 的 。 如 hao123 这 个 网 站 ， 既 没 艺术 ， 又 没 技 
术 ， 可 为 什么 这 个 网 站 很 成 功 呢 ? 一 个 很 重要 的 原因 就 是 实用 。 中 国 网 民 上 网 ， 一 般 不 愿 
意 甚 至 不 会 输入 元 长 的 难 记 的 网 址 。 所 以 hao123 这 个 网 址 导航 网 站 很 实用 。 

形式 美 只 会 给 浏览 者 留 下 一 个 好 的 印象 , 好 的 印象 固然 可 以 让 浏览 者 进一步 浏览 网 站 。 
可 如 果 从 网 站 上 看 到 的 都 是 些 垃圾 信息 ， 没 有 浏览 者 需要 的 实用 信息 ， 那 么 浏览 者 估计 很 
快 就 会 离开 。 

20.4.2 ”如 何 做 好 网 站 内 容 策 划 

网 站 的 内 容 是 浏览 者 停留 时 间 的 决定 要 素 ， 内 容 空 泛 的 网 站 ， 访 客 会 匆匆 离 去 。 只 有 
内 容 充实 丰富 的 网 站 ， 才 能 吸引 访客 细 细 阅读 ， 深 入 了 解 网 站 的 产品 和 服务 ， 进 而 产生 合 
作 的 意向 。 


每 个 用 户 都 有 其 理性 需求 与 感性 需求 ， 网 站 内 容 要 想 打动 浏览 者 ， 归 根 结 底 无 非 是 8 
个 字 : 晓 之 以 理 ， 动 之 以 情 。 
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1。 晓 之 以 理 


晓 之 以 理 ， 即 以 理性 的 语言 向 客户 透彻 介绍 产品 与 服务 ， 并 清晰 地 指出 企业 的 优势 所 
在 ， 让 客户 可 以 明确 地 进行 选择 。 然 而 ，“ 理 性 ”不 等 于 枯燥 ， 要 让 客户 信服 ， 采 用 以 下 
方法 ， 可 以 更 好 地 向 客户 讲 “ 理 ”。 

图 片 说 话 : 俗话 说 一 图 胜 千言 ， 与 其 大 篇 幅 地 介绍 公司 的 规模 、 架 构 、 企 业 文化 ， 不 
如 采用 图 片 来 与 客户 沟通 。 好 的 图 片 可 以 令 客户 更 真实 地 了 解 企业 ， 并 产生 信赖 感 。 

案例 佐证 : 过 于 夸大 产品 优点 ， 有 “ 王 婆 卖 瓜 ” 的 嫌疑 ， 采 用 案例 就 可 信 得 多 了 ， 详 
细 地 介绍 重点 案例 ， 会 令 网 站 的 信任 指数 大 大 提升 。 

突出 数字 和 图 表 : 浏览 者 在 网 站 上 停留 的 时 间 往往 很 短 ， 突 出 数字 和 图 表 可 以 帮助 浏 
览 者 在 短 时 间 内 了 解 网 站 的 实力 和 优势 ， 减 少 阅读 的 时 间 。 


2. 动 之 以 情 


动 之 以 情 ， 即 以 客户 喜爱 的 语言 和 内 容 来 打动 客户 ， 令 客户 停留 。 

亲切 的 问候 与 提示 : 网 站 的 问候 与 提示 多 用 敬 语 ， 如 “请 ”“ 您 ”“ 谢 谢 ”“ 对 不 起 ” 
等 ， 令 客户 觉得 亲切 与 温馨。 

讲 故 事 的 叙述 方式 : 试 着 采用 更 轻松 的 表达 方式 ， 无 论 是 介绍 公司 还 是 说 明 产品 ， 采 
用 朋友 般 的 语气 跟 客户 沟通 ， 让 客户 阅读 起 来 更 加 轻松 ， 也 更 容易 接受 。 

给 予 用 户 足 够 的 帮助 : 当 用 户 阅 读 网 站 内 容 时 ， 给 予 用户 充 分 的 提示 和 帮助 ， 如 产品 
的 帮助 文档 、 操 作 步 又 说 明 、 问 题解 答 等 ， 让 客户 感觉 如 同 有 一 位 热情 的 销售 人 员 在 为 其 
提供 服务 ， 从 而 倍 感 亲切 。 

















20.5 手机 网 页 设计 


现在 越 来 越 多 的 人 通过 手机 上 网 ， 未 来 移动 互联 网 市 场 会 越 来 越 大 ， 但 是 现在 很 多 手 
机 网 页 设计 制作 大 都 不 尽 如 和 人意 。 

在 手机 网 页 的 设计 制作 中 ， 不 仅 要 考虑 分 辨 率 、 尺 寸 大 小 的 兼容 ， 而 且 还 要 考虑 不 同 
的 手机 屏幕 的 形状 。 注 意 要 尽量 把 手机 网 页 制作 成 简洁 的 风格 ， 因 为 手机 没有 鼠标 ， 只 能 
向 上 和 向 下 ， 用 户 不 能 方便 地 切换 页 面 。 

设计 制作 手机 网 页 要 “ 记 住 ”用 户 看 的 内 容 的 位 置 ， 以 便 他 们 随时 返回 浏览 。 最 好 不 
要 使 用 大 段 的 内 容 ， 相 反 ， 要 把 手机 网 页 的 内 容 制作 成 几 个 小 的 部 分 ， 引 起 他 们 的 关注 。 
记 住 ， 这 些 手机 用 户 没有 时 间 去 浏览 大 段 的 内 容 。 

手机 网 页 设计 原则 。 

(1) 客户 端的 Logo， 在 各 个 手机 上 都 应 该 清晰 地 显示 。 

(2) 标题 或 者 底部 栏 必须 100% 地 与 手机 宽度 适 配 。 

(3) 文字 内 容 如 果 显 示 不 下 的 话 ， 可 以 自动 适 配 宽度 进行 折 行 。 

(4) 图 片 可 以 根据 宽度 进行 自动 缩放 , 屏幕 宽度 超过 图 片 本 身 时 , 显示 图 片 本 身 的 大 小 。 
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(5) 适 配 过 程 中 ， 界 面 的 元 素 的 宽 高 最 小 值 应 该 符合 用 户 的 主观 舒适 范围 值 。 

现在 的 移动 互联 网 的 速 度 越 来 越 快 ， 不 过 因为 手机 浏览 器 的 特点 ， 用 户 浏览 起 来 并 不 
像 电脑 浏览 器 那样 可 以 同时 打开 多 个 页 面 ， 而 且 用 户 还 要 看 信息 、 接 电话 、 发 微 博 、 聊 QQ 
等 。 我 们 的 设计 应 该 简略 而 夺目 ， 在 宝贵 的 用 户 浏览 机 会 中 赢得 用 户 的 注意 。 而 且 随 着 用 
户 的 可 选择 的 手机 网 页 的 信息 不 断 增多 ， 很 多 时 候 他 们 往往 是 在 极 短 的 时 间 内 完全 根据 自 
己 瞬间 的 好 恶 来 判断 信息 对 自己 是 否 有 价值 。 


20.6 整体 布局 


下 面 就 来 具体 分 析 和 介绍 这 个 案例 的 完整 开发 过 程 。 希 望 通过 这 个 案例 的 演示 ， 使 读 
者 不 但 了 解 一 些 技术 细节 ， 而 且 能 够 掌握 一 套 遵从 Web 标准 的 网 页 制作 流程 。 


20.6.1 设计 分 析 


如 图 20-1 所 示 的 本 例 制作 的 网 站 首页 ， 主 要 包括 “菜品 分 类 ”“ 招 商 加 盟 ”“ 团 购 打 
折 ”“ 联 系 我 们 ”等 栏目 。 

















图 20-1 网 站 主页 


这 个 页 面 竖 直 方向 分 为 上 、 中 、 下 3 个 部 分 ， 其 中 顶部 是 banner 和 导航 ， 中 间 的 内 容 
区 域 分 为 左右 两 列 展示 正文 内 容 ， 底 部 是 “返回 首页 ”“ 打 电话 ”“ 发 短信 ”“ 地 图 ”等 
栏目 。 

一 个 移动 网 站 指定 风格 时 ， 保 持 所 有 的 东西 简洁 ， 尽 量 追 求 小 页 面 是 非常 有 必要 的 。 
正常 情况 下 大 多 数 手 机 载 入 的 图 片 对 它们 来 说 都 非常 繁重 ， 所 以 在 相关 地 方 使 用 的 图 像 要 
尽 可 能 的 小 ， 而 且 图 片 应 该 是 JPEG、GIF 或 者 PNG 格式 的 ， 因 为 这 些 格式 的 图 片 很 小 。 
另外 确保 你 的 图 片 被 压缩 过 ， 以 免 图 片 在 页 面 中 变 得 很 大 。 还 有 ， 值 得 一 提 的 是 : 用 户 经 
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常会 浏览 到 没有 打开 的 图 片 。 因 此 ， 最 好 始终 使 用 alt 文本 ， 这 是 一 个 值得 推荐 的 做 法 。 
20.6.2 ”排版 架构 


1 

! 

， 在 理解 了 网 站 的 基础 上 ， 我 们 开始 搭建 网 站 的 内 容 结构 。 现 在 完全 不 要 管 CSS， 而 是 
1 完全 从 网 页 的 内 容 出 发 ， 根 据 上 面 列 出 的 要 点 ， 通 过 HTML 搭建 出 网 页 的 内 容 结构 。 如 
上 图 20-2 所 示 的 是 搭建 的 HTML 在 没有 使 用 任何 CSS 设置 的 情况 下 ,使 用 浏览 器 观察 的 效果 。 
i 
1 

1 

1 

1 

1 
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20-2 HTML 结构 





任何 一 个 页 面 都 应 该 尽 可 能 保证 在 不 使 用 CSS 的 情况 下 ,依然 保持 良好 的 结构 和 可 读 
性 , 这 不 仅仅 对 访问 者 很 有 帮助 , 而 且 有 助 于 网 站 被 百度 、Google 等 搜索 引擎 了 解 和 收录 ， 
这 对 于 提升 网 站 的 访问 量 是 至 关 重 要 的 。 

本 网 站 的 页 面 内 容 很 多 , 页 面 整体 部 分 放 在 一 个 大 的 class 名 为 pw 的 <div> 对 象 中 , 其 
HTML 架构 如 下 。 

















<div class="pw"> 
<header class="body header"> 
<div class="top"> 
<div class="l0ogo"><img src="images/logo.png"></div> 
<div class="menu"> 
营业 时 间 <br> 
上 午 : 9.00am<br> 
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下 午 : 10.00pm 
</div> 
</div> 
</header> 
<section class="body banner"> 
<div class="swipe"> 
<ul id="slider"> 
<li style="display:block"><img width="100%" 
src="images/bannerl.jpg"/></1i> 
<li><img width="100%" src="images/banner2.jpg"/></1i> 
<li><img width="100%" src="images/banner3.jpg"/></1i> 
<li><img width="100%" src="images/banner4.jpg"/></1i> 
</ul> 
<div id="pagenavi"> 
<a href="javascript:void(0);" class="active">1</a> 






<a javascript:void(0);">2</a> 
<a avascript:void(0);">3</a> 
<a javascript:void(0);">4</a> 
</div> 
</div> 


<script type="text/javascript" src="js/touchScroll.js"></script> 
<script type="text/javascript" 
src="js/touchslider.dev.js"></script> 
<script type="text/javascript" src="js/run.js"></script> 
</section> 
<section class="body main"> 
<div class="trip" id="nav"> 
<ul class="nav"> 
<li><a href="]list.html"><img src="images/nov01.png"><br> 菜 品 分 


类 </a></1i> 

<li><a href="about.html"><img src="images/nov02.png"><br> 招 商 
加 盟 </a></1i> 

<li><a href="]list.html"><img src="images/nov03.png"><br> 团 购 打 
折 </a></1i> 


<li><a href="cont .html"><img src="images/nov04.png"><br> 联 系 我 
们 </a></1i> 
</ul> 
</div> 
<div class="trip"> 
<div class="index left"> 
<ul> 
<li><a href="list.html"><img src="images/pro01.jpg"></a></1i> 
<li><a href="list.html"><img src="images/tuijian.png"> 
<img src="images/pro02.jpg"></a></1i> 
<li><a href="list.html"><img src="images/pro03.jpg"> 
<img src="images/meiwei.png"></a></1i> 
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</ul> 
</div> 
<div class="index right"> 
<ul> 
<li class="emem"><a href="list.html"><img 
src="images/pro04.jpg"></a></1i> 
<1i class="bmbm"> 
<img src="images/zzh.png"><br> 
2017 年 ， 餐 饮 界 大 洗 牌 ， 成 为 人 们 关注 并 认同 的 话题 ， 无 疑 ， 回 归 理性 消费 是 
一 直 以 来 社会 所 倡导 的 文明 . . .<br> 
<span><a href="about .html"><img 
src="images/more.png"></a></span> 
A 
</ul> 
</div> 
</div> 
</section> 
<div class="body footer"> 
<ul> 
<Li> 
<a href="index.html"> 
<dl> 
<dt><img alt=" 返 回首 页 " 
src="images/icon 1.png"></dt> 
<dd> 返 回首 页 </dd> 
</dl> 
</a> 
/Ti> 
KT 
<a title=" 打 电话 " href="tel 3A//4006771971"> 
<dl> 
<dt><img alt=" 打 电话 " src="images/icon 4.png"></dt> 
<dd> 打 电话 </dd> 
</dl> 
</a> 
< 
> 
<a title=" 发 短信 " href="messages.html"> 
<dl> 
<dt><img alt=" 发 短信 " src="images/icon 5.png"></dt> 
<qd> 发 短信 </qd> 
</dl> 
</a> 
</1i> 
<1i> 
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<a href="../../../../map.baidu.com/mobile/#place/1list/ 
qt=s&wd=&Vt=map/VLt=map&i=8"> 


<dl> 
<dt><img alt=" 地 图 ” src="images/icon 3.png"></dt> 
<dd> 地 图 </dd> 

</dl> 

</a> 
</1i> 
</ul> 
</div> 
</div> 


20.7 制作 首页 


从 功能 上 来 看 ， 首 页 主要 承担 着 树立 企业 形象 的 作用 ， 首 页 在 导航 方面 起 着 重要 的 作 
用 ， 比 如 各 栏目 内 部 主要 内 容 的 介绍 ， 都 可 以 在 首页 中 体现 ， 再 进入 普通 页 ， 让 浏览 者 能 
够 迅速 了 解 网 站 各 栏目 的 主要 内 容 ， 择 其 需要 而 浏览 。 首 页 设计 历来 是 网 站 建设 的 重要 一 
环 ， 不 仅 因为 “第 一 印象 ”至 关 重 要 ， 而 且 直接 关系 到 网 站 各 频道 首页 及 频道 以 下 各 级 栏 
目 首页 的 风格 和 框架 布局 的 协调 统一 等 连锁 性 问题 ， 是 整个 网 站 建设 的 “龙头 工程 ”。 


20.7.1 定义 页 面 的 整体 样式 


网 页 设计 中 我 们 通常 需要 统一 网 页 的 整体 风格 ， 统 一 的 风格 大 部 分 涉及 网 页 中 文字 属 
性 、 网 页 背景 色 以 及 链接 文字 属性 等 ， 如 果 我 们 应 用 CSS 来 控制 这 些 属性 ， 会 大 大 提高 网 
页 设计 速度 ， 更 加 统一 网 页 总 体 效果 。 

建立 文件 后 ， 首 先 要 对 整个 页 面 的 共有 属性 进行 一 些 设置 ， 例 如 对 字体 、 链 接 样 式 、 
背景 颜色 等 属性 进行 设置 。 

body,div,hl,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,1i,pPre, form, fi 

eldset, legend, button, input, textarea, th, td{margin:0;padding:0} 

body { font-size:14px; line-height:150%;text-align:left; color:#666; 

font-family: "微软 雅 黑 ", "Arial Black", Gadget, sans-serif; 

background:url(../images/bg.jpg) left top repeat; } 

img{ border:0; -ms-interpolation-mode:bicubic; margin:0; padding:0;} 

a:link {color:#666; text-decoration:none; outline:none;} 

a:visited {color:#666; text-decoration:none;} 

a:hover { color:#510449; text-decoration:none;} 


























a:active { color:#510449; text-decoration:none;} 
ul,1i{list-style:none;} 

.pw{min-width:320px; background:none repeat scroll 0% 0%; 
margin:0px auto;overflow:hidden; min-height:480px; width:100%; 
padding-bottom:51px;} 
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20.7.2 body_header 部 分 制作 
顶部 的 Logo 和 营业 时 间 在 body_ header 对 象 中 ， 如 图 20-3 所 示 。 
营业 时 间 
吏 少 Di 士 午 :9.00am 
下 午 : 10.00pm 
20-3 ”顶部 的 Logo 和 营业 时 间 在 body_header 对 象 中 


<header> 标 签 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 
内 的 一 个 内 容 区 块 的 标题 ， 但 也 可 以 包含 其 他 内 容 ， 例 如 数据 表格 或 Logo 图 片 。 这 里 用 
<header> 包 含 了 网 站 的 Logo 和 营业 时 间 文 字 。body_header 部 分 的 HIML 代码 如 下 。 


<header class="body header"> 

















<div class="top"> 
<div class="1ogo"><img src="images/l0ogo.png"></div> 
<div class="menu"> 


营业 时 间 <br> 
上 午 : 9.00am<br> 
下 午 : 10.00pm 
</div> 
</div> 
</header> 


body_header 部 分 的 CSS 代码 如 下 。 


.body header{ clear:both;} 
.top{ clear:both; height:80px; width:98%; margin:0 auto;} /* 设置 顶部 div 
的 宽度 和 高 度 */ 
.logo{ float:left; margin-top:10px;} /* 设置 Logo 向 左 浮动 */ 
-menu{ float:right; /* 设置 营业 时 间 文 字 向 右 浮动 */ 
margin-top:10px; /* 设置 文字 顶部 边界 */ 
font-size:16px;  ”/* 设置 文字 的 字号 */ 
font-weight:bold; /* 设置 文字 的 加 粗 */ 
color:#6e4a3b; /* 设置 文字 的 颜色 */ 
未 


20.7.3 body_banner 部 分 制作 
翻转 的 banner 图 片 在 body_ banner 对 象 中 ， 如 图 20-4 所 示 。 
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20-4 ”翻转 的 banner 图片 
<section> 标 签 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 一 个 <section> 元 素 通 























常 由 内 容 及 其 标题 组 成 。 这 里 设置 了 bannerl.jpg、banner2.jpg、banner3.jpg、banner4.jpg 四 
幅 图 片 ， 并 且 利用 JavaScript 程序 制作 成 翻转 效果 。body_banner 部 分 的 HTML 代码 如 下 。 


<section class="body banner"> 
<div class="swipe"> 
<ul id="slider"> 
<li style="display:block"><img width="100%" 
src="images/bannerl.jpg"/></1i> 
<1i><img width="100%" src="images/banner2.jpg"/></1i> 
<li><img width="100%" src="images/banner3.jpg"/></1i> 
<li><img width="100%" src="images/banner4.jpg"/></1i> 
</ul> 
<div id="pagenavi"> 
<a href="javascript:void(0);" class="active">1</a> 
<a href="javascript:void(0);">2</a> 
<a href="javascript:void(0);">3</a> 
<a href="javascript:void(0);">4</a> 
</div> 
</div> 
<script type="text/javascript" src="js/touchscroll.js"></script> 
<script type="text/javascript" 
src="js/touchslider.dev.js"></script> 
<script type="text/javascript" src="js/run.js"></script> 
</section> 


body_banner 部 分 的 CSS 代码 如 下 。 


.Swipe{width:100%;overflow:hidden;position:relative;} 

.swipe ulf /*banner 轮 播 */ 
-webkit-transition:left 800ms ease-in 0; 
-moz-transition:left 800ms ease-in 0; 
-o-transition:left 800ms ease-in 0; 
-ms-transition:left 800ms ease-in 0; 
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transition:left 800ms ease-in 0; 





} 

.Swipe 

#pagenavi {position:absolute; left:0;bottom: 5px; text-align:center;width:10 
0%; 

background:rgba(000, 000, 000, 0.6)!important; filter:Alpha (opacity=60); 
padding:10px;} 

.SWwipe #pagenavi a{width:14px; height:14px; line-height:99em; 
background:#fff; 

—webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; 
margin:0 4px; overflow:hidden; cursor:pointer; display:inline-block; 
*display:inline; *zoom:1; position:relative;} 

.Swipe #pagenavi a.active{background:#ff0; position:relative;} 


20.7.4 body_main 部 分 制作 
导航 菜单 和 正文 部 分 在 body_main 对 象 中 ， 如 图 20-5 所 示 。 





20-5 ”导航 菜单 和 正文 部 分 在 body_main 对 象 中 


导航 菜单 在 id 为 nav 的 <div> 内 ， 正 文部 分 在 class 为 trip 的 <div> 内 ， 这 部 分 的 HIML 
代码 如 下 。 


<section class="body main"> 
<div class="trip" id="nav"> 
<ul class="nav"> 
<li><a href="]list.html"><img src="images/nov01.png"><br> 菜 品 
分 类 </a></1i> 
<li><a href="about.html"><img src="images/nov02.png"><br> 招 商 
加 盟 </a></1i> 
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<li><a href="list.html"><img src="images/nov03.png"><br> 团 购 
打折 </a></1i> 
<li><a href="cont.html"><img src="images/nov04.png"><br> 联 系 
我 们 </a></1i> 
</ul> 
</div> 
<div class="trip"> 
<div class="index left"> 
<ul> 
<li><a href="list.html"><img 
src="images/pro01.jpg"></a></1i> 
<li><a href="list.html"><img src="images/tuijian.png"> 
<img src="images/pro02.jpg"></a></1i> 
<li><a href="list.html"><img src="images/pro03.jpg"> 
<img src="images/meiwei.png"></a></1i> 
</ul> 
</div> 
<div class="index right"> 
<ul> 
<1i class="emem"><a href="1ist.html"><img 
src="images/pro04.jpg"></a></1i> 
<li class="bmbm"> 
<img src="images/zzh.png"><br> 
2017 年 ， 餐 饮 界 大 洗 牌 ， 成 为 人 们 关注 并 认同 的 话题 ， 无 疑 ， 回 归 理 性 消费 
是 一 直 以 来 社会 所 倡导 的 文明 . . .<br> 
<span> 
<ahref="about .html"><img src="images/more.png"></a></span> 
</1i> 
</ul> 
</div> 
</div> 
</section> 


其 CSS 代码 如 下 。 


#nav{ height:90px; background:url(../images/navbg.png) left bottom 
repeat—x;} 

.nav li{ width:25%; float:left; text-align:center; line-height:16px; 
font-size:16px;} 

Hav Li Aal Colors#EFEE2} 

.body banner{ clear:both;} 














-body main{clear:both; margin-top:-5px;} 

.trip{ clear:both;} 

.index left{ float:left; width:174px; background:#fff;} 

.index left li{ border:2px #fff solid;} 

-index right{ border:2px #fff solid; width:132px; float:right;} 
-emem{ text-align:center; background:#fff;} 
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.bmbm{ padding:10px 10px 0 1l10px; color:#fff; height:210px; 
background:-webkit-gradient (linear, 0 0, 0 100%, from(#ffd942), 

to (#ffa20f£)) ;background: -moz-linear-gradient (top, #ffd942, #ffa20f); 
filter:progid:DXxImageTransform.Microsoft .gradient (startColorstr=#ffd942, 
endColorstr=#ffa20f, grandientType=0);} 

.bmbm span{ float:right;} 


20.7.5 ”body_footer 部 分 制作 
底部 的 导航 部 分 在 body footer 对 象 中 ， 如 图 20-6 所 示 。 


全 全 





返回 首页 打 电 话 





20-6 底部 的 导航 部 分 


这 部 分 主要 包括 “返回 首页 ”“ 打 电话 ”“ 发 短信 ”“ 地 图 ”， 其 HTML 代码 如 下 
所 示 。 


<div class="body footer"> 


<ul> 
< 
<a href="index.html"> 
<dl> 
<dt><img alt=" 返 回首 页 " 
src="images/icon 1.png"></dt> 
<dd> 返 回首 页 </dd> 
</d1> 
</a> 
/E> 
< 
<a title=" 打 电话 "href="tel 3A//4006771971"> 
<dl> 
<dt><img alt=" 打 电话 " src="images/icon 4.png"></dt> 
<dd> 打 电话 </dq> 
</dl> 
</a> 
2 
> 
<a title=" 发 短信 " href="messages.html"> 
<dl> 
<dt><img alt=" 发 短信 " src="images/icon 5.png"></dt> 
<dd> 发 短信 </dd> 
</dl> 
</a> 
> 
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天 了 > 
<a href="../../../../map.baidu.com/mobile/#place/list/ 
qt=sgwd=&vt=map/vt=map&i=8"> 


<dl> 
<dt><img alt=" 地 图 " src="images/icon 3.png"></dt> 
<qd> 地 图 </dq> 

</dl> 

</a> 
</1i> 
</ul> 
</div> 
其 CSS 代码 如 下 所 示 。 


-body_ footer{width:100%; height:51lpx; background:url(../images/nav.jpg) 
left bottom repeat-x; position:fixed; bottom:0;} 

.body footer ul{width:100%;} 

.body footer ul li{width:25% ; float:left; color:#fff; 
background:url(../images/line.jpg) right top no-repeat;} 

.body footer ul li:hover{width:25% ; float:left; color:#fff; 
background:url(../images/nav01.jpg) left bottom repeat-x;} 

-body footer ul li a{width:100%; height:46px; display:block; 
padding-top: 5px;} 

.body footer ul li a:hover { color:#ff0;} 

-body _ footer ul li dl{width:auto; margin:0 auto; text-align:center;} 
.body footer ul 1i dt{width:auto; height:25px; overflow:hidden;} 

.body footer ul li dd{width:auto; height:20px; font-size:12px; color:#fff; 
line-height:20px; overflow:hidden;} 


本 章 小 结 


现在 手机 的 功能 越 来 越 多 ， 而 这 就 使 得 用 手机 浏览 网 页 的 用 户 越 来 越 多 。 移 动 端 页 面 

















的 设计 和 PC 端 页 面 设计 是 有 很 多 不 同 的 ， 对 于 移动 端的 设计 ， 需 要 从 用 户 的 角度 来 思考 
一 些 细节 如 何 设计 ， 懂 得 从 用 户 的 角度 来 设计 网 站 。 对 于 手机 网 站 的 浏览 ， 用 过 手机 的 人 
应 该 都 知道 ， 每 个 人 的 手机 往往 都 不 一 样 ， 不 像 电脑 那样 ， 就 那 几 个 屏幕 尺寸 。 移 动 网 站 
制作 设计 应 该 方便 用 户 触摸 与 滑动 查找 。 











练 习 题 


制作 一 个 如 图 20-7 所 示 的 移动 网 页 。 
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20-7 ”移动 网 页 
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【学 习 目标 】 

企业 在 网 上 形象 的 树立 已 成 为 企业 宣传 的 重点 , 越 来 越 多 的 企业 更 加 重视 自己 的 网 站 。 
企业 通过 对 企业 信息 的 系统 介绍 ， 让 浏览 者 了 解 企业 所 提供 的 产品 和 服务 ， 并 通过 有 效 的 
在 线 交 流 方式 搭 起 客户 与 企业 间 的 桥梁 。 企业 网 站 的 建设 能 够 提高 企业 的 形象 和 吸引 更 多 
的 人 关注 公司 ， 以 获得 更 大 的 发 展 。 在 本 章 中 将 分 析 、 策 划 、 设 计 制 作 一 个 完整 的 企业 网 
站 。 通 过 这 个 综合 案例 的 学 习 ， 读 者 不 仅 可 以 了 解 其 中 的 技术 细节 ， 而 且 能 够 掌握 一 套 遵 
从 Web 标准 的 网 页 设计 流程 。 

本 章 主要 内 容 包 括 : 

(1) CSS 布局 理念 ; 

(2) 网 页 的 综合 设计 制作 。 


21.1 案例 概述 


如 图 21-1 所 示 本 例 制作 的 网 站 首页 , 主要 包括 “首页 ”“ 关 于 我 们 ”“ 最 新 动态 ”“ 网 
上 预订 ”“ 温 馨 客房 ” “特色 餐饮 ”和 “会 议会 务 ” 等 栏目 。 
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网、 全 交大 计件 开 和 日 和 季 力 eo 人 扣 有 R81 
NN tm 
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和 的 e 们 丰县 人 各 和民 这 
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Ts 抽 玫 展 ， 现 已 或 旋光 地 大 、 





图 21-1 网 站 主页 
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这 个 页 面 
内 容 区 域 分 为 








竖 直 方向 分 为 上 中 下 3 个 部 分 ， 其 中 上 下 两 部 分 的 背景 会 自动 延伸 ， 中 间 的 
左右 两 列 ， 左 列 为 主要 栏目 导航 ， 右 列 是 网 站 的 公司 介绍 和 图 片 展示 等 正文 








内 容 。 这 个 页 





下 面 就 来 
者 不 但 了 解 一 
首先 要 确 
这 个 网 页 的 内 
网 站 的 灵魂 ， 
要 为 了 差异 化 
站 功能 没有 实 
网 站 的 内 
内 容 充实 丰富 
作 的 意向 。 
在 这 个 网 
解 这 个 网 站 信 
要 目的 是 宣传 
我 们 要 制 


@ 标题; 
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面具 有 很 好 的 用 户 体验 ， 例 如 左 侧 导 航 菜单 具有 鼠标 指针 经 过 时 发 生变 化 的 














效果 ， 如 图 21-2 所 示 。 


记 、 标 准 厅 百 作 套 次 件 别 时 6 栋 日 接洽 能 力 350 作 人 肥 陛 同时 容 抽 350 人 的 大 矢 会 厅 、 


度 钦 村 拥有 大 
大 小 他 7 问 、 吉 天 用 铬 的 河 边 长久 ，10 、396 人 的 大 小 会 议 室 4 网 及 孔 大 如 和 设施 ， 及 坟 色 无 公害 靖 蘑 基 
地 ,是 您 必 次 ， 住 闪 、 如 季 ， 休 闲 、 会议， 县 区 玫 

和 生 的 拖 交 不 信 罗 其 村 人 原 寻 民 凡 格 与 大 江 灯 特 条 江 的 队 台 村 赂 成 为 一 省 交 负 的 凡 蘑 线 。 度 全 村 经 过 
Te 的 大 时 ， 纲 已 成 旋 黄金 才 岸 落 名 模 好 大 、 咎 你 量 而 9 要 出。 





21-2 鼠标 指针 经 过 导航 菜单 的 效果 


21.2 内 容 分 析 


具体 分 析 和 介绍 这 个 案例 的 完整 开发 过 程 。 希 望 通过 这 个 案例 的 演示 ， 使 读 
些 技术 细节 ， 而 且 能 够 掌握 一 套 遵从 Web 标准 的 网 页 制作 流程 。 
定 一 个 问题 ， 设 计 制 作 一 个 网 站 的 第 一 步 是 什么 ? 设计 一 个 网 页 的 第 一 步 是 
容 。 一 个 网 站 要 想 留 住 更 多 的 用 户 ， 首 要 的 是 网 站 的 内 容 。 网 站 内 容 是 一 个 
内 容 做 得 好 ， 做 到 有 自己 的 特色 才 会 脱颖而出 。 当 然 有 一 点 需要 注意 的 是 不 
而 差异 化 ， 只 有 满足 用 户 核心 需求 的 差异 化 才 是 有 效 的， 否则 跟 模 仿 其 他 网 
质 的 区 别 。 

容 是 浏览 者 停留 时 间 的 决定 要 素 ， 内 容 空 泛 的 网 站 ， 访 客 会 匆匆 离 去 。 只 有 
的 网 站 ， 才 能 吸引 访客 细 细 阅读 ， 深 入 了 解 网 站 的 产品 和 服务 ， 进 而 产生 合 





站 页 面 中 ， 首 先 要 有 明确 的 公司 名 称 或 网 站 标志 ， 此 外 要 给 访问 者 方便 地 了 
息 的 途径 ， 包 括 自身 介绍 、 联 系 方式 等 内 容 的 链接 ， 接 下 来 ， 这 个 网 站 的 主 
公司 ， 因 此 必须 有 清晰 的 导航 结构 。 

作 的 这 个 网 站 要 展示 哪些 内 容 呢 ? 大 致 应 包括 如 下 内 容 。 











MN 2 aassmmis 
LILLLLL LI 








@ 图片 展 示 ; 
@ 网 上 订购 ; 
e@ ”联系 信息 ; 
@ ”其 他 导航 信息 。 











21.3 ”HTML 结构 设计 


在 理解 了 网 站 的 基础 上 ， 我 们 开始 搭建 网 站 的 内 容 结 构 。 现 在 完全 不 要 管 CSS， 而 是 
完全 从 网 页 的 内 容 出 发 ， 根 据 上 面 列 出 的 要 点 ， 通 过 HTML 搭建 出 网 页 的 内 容 结构 。 如 
图 21-3 所 示 的 是 搭建 的 HTML 在 没有 使 用 任何 CSS 设置 的 情况 下 ,使 用 浏览 器 观察 的 效果 。 
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度假 村 胃 有 大 筷 、 标 准 间 百 余 豆 , 独 体 别 6 栋 , 日 的 待 能 力 350 余 人 (bir les 人 的 大 赛会 厅 、 大 小 包间 7? 间 、 霜 天 用 餐 的 河 边 长 廊 ，10~300 人 的 大 小 会 议 室 4 间 及 了 配套 娱乐 设 
施 ， 及 绿色 无 公害 世 茉 基地， 是 你 餐饮 、 住 窗 、 恕 乐 、 休 闲 、 会 议 、 六 区 尖 芝 的 最 全 
独特 的 纯 详 木 候 男 斯 多 村 别 皮 建筑 风格 与 大 红 灯 沱 全 内 的 享 台 檬 赂 ， 及 人 和 引 。 度假 村 经 过 18 年 的 发 展 ， 现 已 成 为 黄金 海岸 旅游 规模 最 大 、 档 次 最 高 的 度假 村 。 


图 片 展 示 


新 闻 动 态 


人 + 
国务 院 批 准 “5，19 为 “中 国旅 游 日 

旅游 大 种 民 大 员 a Rs 
宾馆 旅游 大 囊 民 大 天 误 优 惠 政策 


入 住 日 
全 IE) 
离开 日 
和 Pa2020 


EE 


Copyright 金色 海岸 旅游 有 限 公司 


21-3 ”HTML 结构 


任何 一 个 页 面 都 应 该 尽 可 能 地 保证 在 不 使 用 CSS 的 情况 下 ， 依 然 保 持 良好 的 结构 和 可 
读 性 , 这 不 仅仅 对 访问 者 很 有 帮助 ， 也 有 助 于 网 站 被 百度 、Google 等 搜索 引擎 了 解 和 收录 ， 
这 对 于 提升 网 站 的 访问 量 是 至 关 重 要 的 。 

本 网 站 的 页 面 内 容 很 多 ， 页 面 整体 部 分 放 在 一 个 大 的 id 为 templatemo_maincontainer 
的 <div> 对 象 中 ， 在 这 个 <div> 对 象 中 包括 两 列 的 布局 方式 ， 左 侧 的 内 容 放 在 id 为 
templatemo_left_ column 的 <div> 对 象 中 ,右边 的 正文 部 分 放 在 id 为 templatemo right_column 
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的 <div> 对 象 中 ， 底 部 放 在 id 为 templatemo footer 的 <div> 对 象 ， 在 此 对 象 中 放置 底部 版 
权 信 息 。 
其 页 面 中 的 HTML 框架 代码 如 下 所 示 。 


<body> 
<div id="templatemo maincontainer"> 








<div id="templatemo topsection"> 
<div id="templatemo title"> 金 色 海岸 旅游 </div> 
</div> 
<div id="templatemo left column"> 
<div id="templatemo menu top"></div> 
<div class="templatemo menu"> 
<ul> 
<li><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 最 新 动态 </a></1i> 
<1i><a href="#"> 温 声 客 房 </a></1i> 
<1i><a "> 特色 餐饮 </a></1i> 
<1i><a href="#"> 会 议会 务 </a></1i> 
<1i><a href="#"> 出 游 指南 </a></1i> 
<1i><a href="#"> 网 上 预订 </a></1i> 
<1i><a href="#"> 行 车 路 线 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</div> 
<div id="templatemo contact"> 
<strong> 快 速 联系 我 们 <br/> </strong> 
Tel: 001-000-1000<br /> 
Fax: 002-000-2000<br /> 
Email: webmaster@.com</div> 
</div> 
<div id="templatemo right column"> 
<div class="innertube"> 
<h1> 公 司 介绍 </h1> 
<p> 度 假 村 拥有 套房 、 标 准 间 百 余 套 , 独 体 别墅 6 栋 , 日 接待 能 力 350 余人 , 配 有 能 同时 容纳 350 
人 的 大 宴会 厅 、 大 小 包间 7 间 、 露 天 用 餐 的 河 边 长 廊 ，10 一 300 人 的 大 小 会 议 室 4 间 及 配套 娱乐 设 
施 ， 及 绿色 无 公害 蔬菜 基地 ， 是 您 餐饮 、 住 宿 、 娱 乐 、 休 闲 、 会 议 、 景 区 游览 的 最 佳 去 处 。<br /> 
独特 的 纯 实 木 俄罗斯 乡村 别墅 建筑 风格 与 大 红 灯 笼 镶嵌 的 亭 台 楼 阁 , 成 为 一 道 亮丽 的 风景 线 。 度假 
村 经 过 18 年 的 发 展 ， 现 已 成 为 黄金 海岸 旅游 规模 最 大 、 档 次 最 高 的 度假 村 。<br /> 
</p> 
</div> 
<div id="templatemo destination"> 
<h2> 图 片 展示 </h2> 
<p> 








<img src="images/templatemo photol.jpg" alt="xxxx.com" width="85" 
height="85" /> 


多 350 





第 21 瘟 ”公司 宣传 网 站 的 布局 


<img src="images/templatemo photo2.jpg" alt="xxxx.com" width="85" 
height="85" /> 
<img src="images/templatemo photo3.jpg" alt="xxxx.com" width="85" 
height="85" /></p> 

<h2> 新 闻 动 态 </h2> 

<p> 风 光 国 际 摄影 大 赛 征 稿 启事 <br /> 

国务 院 批 准 &quot; 5&gmiddot;19&quot; 为 &quot; 中 国旅 游 昌 squot; <br /> 

旅游 大 惠 民 大 酬宾 活动 景区 门票 优惠 表 <br /> 

宾馆 旅游 大 惠 民 大 酬宾 优惠 政策 <br /> 

</p> 

<p>&nbsp; </p> 

</div> 

<div id="templatemo bot"></div> 
</div> 
<div id="templatemo footer">Copyright Your 金色 海岸 旅游 有 限 公 司 </div> 
</body> 


可 以 看 到 这 些 代码 非常 简单 , 使 用 的 都 是 最 基本 的 HIML 标签 , 包括 <p><ul><img><li>。 
<ul> 列 表 在 代码 中 出 现 了 多 次 ， 当 有 若干 个 项 目 并 列 时 ，<ul> 是 个 很 好 的 选择 ， 很 多 网 页 
都 有 <ul> 标 签 ， 它 可 以 使 页 面 的 逻辑 关系 非常 清晰 。 


21.4 ”页面 方案 设计 


在 设计 任何 一 个 网 页 前 ， 首 先 应 该 有 一 个 构思 的 过 程 ， 对 网 站 的 功能 和 内 容 进行 全 面 
的 分 析 。 

在 具体 制作 页 面 之 前 ， 可 以 首先 设计 一 个 如 图 21-4 所 示 的 页 面 草 图 。 接 着 对 版 面 布局 
进行 仔细 规划 和 调整 ， 反 复 修 改 后 确定 最 终 的 布局 方案 。 
































公司 名 称 

公司 介绍 
网 
站 
> 图 片 展示 店 订 
航 到 示 酒店 订购 
联系 我 们 新 闻 动 态 

版 权 信息 


图 21-4 页 面 草图 
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新 建 的 页 面 就 像 一 张 白 纸 ， 没 有 任何 表格 、 框 架 和 约定 俗 成 的 东西 ， 尽 可 能 地 发 挥 想 
象 力 ， 将 想到 的 “内 容 ” 画 上 去 。 这 属于 创造 阶段 ， 不 必 讲究 细 用工 整 ， 不 必 考虑 细节 功 
能 ， 只 要 用 简陋 的 线条 勾画 出 创意 的 轮廓 即 可 。 尽 可 能 地 多 画 几 张 草图 ， 最 后 选 定 一 个 满 
意 的 来 创作 。 

接 下 来 的 任务 就 是 ， 可 以 使 用 Photoshop 或 Fireworks 软件 来 具体 设计 真正 的 页 面 方案 
了 。 有 经 验 的 网 页 设计 者 ， 通 常会 在 制作 网 页 之 前 ， 设 计 好 网 页 的 整体 布局 ， 这 样 在 具体 
设计 过 程 将 会 胸有成竹 ， 大 大 节省 工作 时 间 。 

于 本 书 篇 幅 有 限 ， 因 此 关于 如 何 使 用 Photoshop 设计 制作 完整 的 页 面 方案 就 不 再 详 
细 介 绍 了 。 如 果 读 者 对 Photoshop 软件 不 熟悉 ， 可 以 参考 相关 的 Photoshop 资料 ， 掌 握 一 些 
Photoshop 软件 的 基本 使 用 方法 。 

如 图 21-5 所 示 的 就 是 在 Photoshop 中 设计 的 页 面 方案 。 这 一 步 的 核心 任务 是 美术 设计 ， 

通俗 地 说 就 是 让 页 面 更 美观 、 更 漂亮 。 







































































1 IE] 





2 
和 
六 
ea 
到 加 | 
0.a,| 
总 
[1 
Ey 
S 
局 





ee 











图 21-5 在 Photoshop 中 设计 的 页 面 方案 


21.5 定义 页 面 的 整体 样式 


网 页 设计 中 我 们 通常 需要 统一 页 面 的 整体 风格 ， 统 一 的 风格 大 部 分 涉及 网 页 中 文字 属 
性 、 网 页 背景 色 以 及 链接 文字 属性 等 等 ， 如 果 我 们 应 用 CSS 来 控制 这 些 属 性 ， 会 大 大 提高 
网 页 设计 速度 ， 更 加 统一 网 页 总 体 效果 。 

建立 文件 后 ， 首 先 要 对 整个 页 面 的 共有 属性 进行 一 些 设 置 ， 例 如 对 字体 、margin、 
padding、 背 景 颜色 等 属性 进行 设置 。 


body{ 


margin:0; 
从 352 
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bi 
4 
要 
by| 


padding:0; 
line-height: 1.5em; 
background: #782609 Url (images/templatemo body bg.jpg) repeat-x; 
font-size: 11lpx; 
font-family: 宋体 ; 
} 
在 body 中 设置 了 外 边 距 margin、 内 边 距 padding 都 为 0， 行 高 line-height 设 为 1.5em， 
字号 设置 为 11px， 并 且 设 置 字体 为 宋体 。 
在 body 中 使 用 background 设置 了 水 平 背景 图 像 ttmplatemo body bg.jpg， 这 个 图 像 可 
以 很 方便 地 在 设计 方案 图 中 获得 ， 如 果 使 用 Photoshop 软件 ， 可 以 切 出 一 个 紧 条 ， 可 以 切 
割 得 很 细 ， 减 小 文件 的 大 小 。 在 CSS 中 ，repeat-x 使 这 个 背景 图 像 水 平方 向 平 铺 就 可 以 产 
生 宽度 自动 延伸 的 背景 效果 了 ， 如 图 21-6 所 示 。 




















图 21-6 背景 图 像 平 铺 


下 面 定义 网 页 中 的 链接 文字 的 样式 ， 下 面 的 CSS 代码 是 定义 网 页 中 的 链接 文字 在 各 种 
状态 下 的 颜色 和 样式 , 以 及 网 页 中 的 <h1><h2><h3> 标 签 中 的 标题 文字 的 字号 、 粗细 、 颜色 、 
字体 等 样式 。 

a:link, a:visited { color: #621c03; text-decoration: none; font-weight: bold;} 

/* 链 接 文 字样 式 */ 

a:active, a:hover{color: #621c03; text-decoration: none; font-weight: bold; } 

/* 链 接 文 字样 式 */ 

hE 

font-size: 18px; /* 设置 标题 1 字号 */ 

color: #782609; /* 设置 标题 1 字体 颜色 */ 

font-weight: bold;  /* 设置 标题 1 加 粗 */ 

background: url (images/templatemo hl.jpg) no-repeat; /* 设 置 标题 1 背景 图 像 */ 
height: 27px; /* 设置 标题 1 行 高 */ 

padding-top: 40px; ”/* 设置 标题 1 顶部 内 边 距 */ 

padding-left: 70px;  /* 设置 标题 1 左 侧 内 边 距 */ 


(30| 
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font-size: 13px; /* 设置 标题 2 字号 */ 
font-weight: bold; /* 设置 标题 2 加 粗 */ 


color SEFES /* 设置 标题 2 字体 颜色 */ 
height: 22px; /* 设置 标题 2 行 高 */ 


padding-top: 3px; /* 设置 标题 2 顶部 内 边 距 */ 

padding-left: 5px; /* 设置 标题 2 左 侧 内 边 距 */ 

background: url (images/templatemo h2.jpg) no-repeat; /* 设置 标题 2 背景 图 像 */ 
} 


设置 好 链接 文字 样式 和 <h1><h2> 标 题 文 字样 式 后 的 效果 如 图 21-7 所 示 。 





图 21-7 定义 网 页 中 的 链接 文字 及 标题 文字 样式 





21.6 ”制作 页 面 头 部 


下 面 对 页 面 头 部 进行 设计 ， 这 里 的 页 头 部 分 比较 简单 ， 只 有 一 个 公司 名 称 ， 如 图 21-8 
所 示 。 








图 21-8 ”页面 头 部 
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21.6.1 制作 页 面 头 部 的 结构 


首先 在 页 面 中 插入 一 个 包含 整个 页 面 的 <div>， 在 这 个 <div> 内 再 插入 项 部 <div> 和 公司 
名 称 。 

<div id="templatemo maincontainer"> 

<div id="templatemo topsection"> 

<div id="templatemo title"> 金 色 海岸 旅游 </div> 

</div> 

</div> 

这 里 将 整个 头 部 部 分 放 入 一 个 <div> 中 , 为 该 <div> 设 置 id 名 称 为 “templatemo _topsection”， 
将 公司 名 称 放 入 一 个 <div> 中 ， 为 该 <div> 设 置 名 称 为 “templatemo title”。 


21.6.2 ”定义 页 面 头 部 的 样式 
制作 完 页 头 部 分 的 结构 后 ， 就 可 以 定义 页 头 部 分 的 样式 了 。 首 先 来 定义 外 部 容器 


templatemo_maincontainer 的 整体 样式 。 





#templatemo maincontainer{ 


width: 900px; /* 定义 外 部 容器 的 宽度 */ 
margin: 0 auto; /* 上 下 边 距 0， 浏 览 器 自动 适应 屏幕 居中 */ 
float: left; /* 浮动 左 对 齐 */ 


background: url (images/templatemo content bg.jpg) repeat-y; 
/* 设置 背景 图 片 */ 





这 里 的 代码 定义 了 外 部 容器 的 宽度 为 900px， 上 下 边 距 为 0， 居 中 对 齐 ， 并 且 设 置 了 背 
景 图 片 。 定 义 完 外 部 容器 样式 后 效果 如 图 21-9 所 示 。 





Ot, Eaten A 
和 
和 





图 21-9 定义 外 部 容器 样式 
接 下 来 定义 头 部 部 分 的 样式 ， 其 代码 如 下 所 示 。 


#templatemo topsectionf{ 
background: url (images/templatemo header.jpg) no-repeat; /* 设置 背景 图 


片 不 重复 */ 
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height: 283px; /* 设置 高 度 */ 

} 

#templatemo titlef{ 
margin: 0; /* 设置 外 边 距 */ 
padding-top: 150px; /* 设置 顶部 内 边 距 */ 
padding-left: 50px; ”/* 设置 左 侧 内 边 距 */ 
Color: #FFFFFF; /* 设置 文字 颜色 */ 
font-size: 24px; /* 设置 文字 字号 */ 
font-weight: bold; /* 设置 文字 加 粗 */ 

} 


这 里 的 代码 定义 了 id 为 templatemo_topsection 的 <div> 的 高 度 和 背景 图 片 , 并 定义 了 id 
为 templatemo title 的 <div> 内 的 文字 颜色 、 字 号 、 加 粗 、 外 边 距 和 内 边 距 等 ， 在 浏览 器 中 
浏览 设置 头 部 样式 后 的 效果 ， 如 图 21-10 所 示 。 








21-10 设置 头 部 样式 后 的 效果 


21.7 ”制作 左 侧 导 航 


左 侧 部 分 是 网 站 的 导航 部 分 ， 如 图 21-11 所 示 ， 这 部 分 增加 了 鼠标 指针 经 过 时 改变 颜 
色 效果 ， 在 鼠标 指针 经 过 导航 栏 的 时 候 ， 相 应 的 菜单 项 会 发 生变 化 。 





21-11 ” 左 侧 导航 
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21.7.1 制作 左 侧 导 航 部 分 的 结构 


网 页 左 侧 有 一 个 漂亮 的 竖 排 导航 菜单 ， 将 横 排 文字 转换 为 竖 排 格式 ， 方 便 美观 ， 其 实 
现 方法 非常 简单 。 下 面 制作 其 基本 HTML 结构 。 

首先 左 侧 导航 和 联系 我 们 都 放 在 id 为 templatemo left column 的 <div> 中 ， 在 这 个 
<div> 内 再 插入 下 面 的 导航 部 分 结构 代码 。 


<div id="templatemo left column"> 
<div class="templatemo menu"> 
<ul> 
<li><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 关 于 我 们 </a></1i> 
<1i><a href="#"> 最 新 动态 </a></1i> 
<1i><a href="#"> 温 声 客 房 </a></1i> 
<1i><a href="#"> 特 色 和 餐饮 </a></1i> 
<1i><a href="#"> 会 议会 务 </a></1i> 
<1i><a href="#"> 出 游 指 南 </a></1i> 
<1i><a href="#"> 网 上 预订 </a></1i> 
<1i><a href="#"> 行 车 路 线 </a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</div> 
</div> 


这 里 主要 使 用 无 序列 表 来 制作 导航 菜单 ，<ul> 是 CSS 布局 中 使 用 得 很 广泛 的 一 种 元 
素 ， 主 要 用 来 描述 列表 型 内 容 ， 每 个 <ul></ul> 表 示 其 中 的 内 容 为 一 个 列表 块 ， 块 中 的 每 一 
条 列表 数据 用 <li></li> 来 描述 。 


21.7.2 ”定义 左 侧 导 航 的 样式 
下 面 使 用 CSS 来 定义 左 侧 导 航 的 样式 。 首 先 来 定义 外 部 容器 templatemo_left_column 
的 样式 。 


#templatemo left column { 
float: left; 
width: 229px; 














} 

这 里 设置 宽度 为 229px， 浮 动 方式 为 左 对 齐 ， 从 而 使 下 一 个 对 象 贴 紧 该 对 象 的 右边 ， 
最 终 具 有 了 向 左 浮动 的 特性 。 

接着 定义 列表 项 的 样式 ， 包 括 宽度 、 高 度 、 列 表 样 式 、 背 景 图 片 、 字 号 、 加 粗 等 ， 其 
代码 如 下 所 示 。 


:templatemo menu { 
margin-top: 40px; /* 设置 顶部 外 边 距 */ 
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width: 188px; /* 设置 宽度 */ 

} 

.templatemo menu 1if{ 
list-style: none; /* 设置 列表 样式 */ 
height: 30px; /* 设置 列表 高 度 */ 
display: block; /* 以 块 状 对 象 显示 */ 
background: url (images/templatemo menu bg.jpg) no-repeat; /* 设置 背景 

颜色 */ 
font-weight: bold;  /* 设置 加 粗 */ 
font-size: 12px; /* 设置 字号 */ 
padding-left: 30pzx; /* 设置 左 侧 内 边 距 */ 
padding-top: 7px; /+* 设置 顶部 内 边 距 */ 


} 
.templatemo menu a { 
SCOLOry PEEES /* 设置 链接 文字 颜色 */ 
text-decoration: none; /* 设置 文字 下 划 线 */ 
} 


templatemo menu a:hover { 
color: #f08661; /* 设置 鼠标 经 过 的 颜色 */ 
} 
display 属性 是 CSS 中 对 象 显示 模式 的 一 个 属性 , 主要 用 于 改变 对 象 的 显示 方式 。display: 
block 是 这 里 的 重点 ， 它 使 得 <a> 链 接 对 象 的 显示 方式 由 一 段 文本 改 为 一 个 块 状 对 象 ， 和 
<div> 的 特性 相同 。 就 可 以 使 用 CSS 的 外 边 距 、 内 边 距 、 边 框 等 属性 给 <a> 链 接 标 签 加 上 
系列 的 样式 了 。 如 图 21-12 所 示 为 定义 完 导 航 后 的 样式 效果 。 


金色 海岸 旅游 


六 网 有 雪 计 ， 生 辣 百 要 大 .交代 村 .日 拓 和 寺 放 0 二 人 配 有 下 则 时 守 s50 人 的 大 委 全 厅 。 大 小 外 同和 、 
天 三 的 更 过 攻 麻 。 10、306 的 大作 合议 在 4 同 夺 二 检 拯 计 施 ， 及 和 色 天 人 六 基地 ， 加 人 入 ， 储 术 ， 订 和 





21-12 ”定义 完 导 航 样 式 后 的 效果 
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21.8 制作 联系 我 们 部 分 


网 站 上 应 该 提供 足够 详尽 的 联系 信息 , 包括 公司 的 地 址 电话、 传真 、 邮 政 编码 、E-Mail 
地 址 等 基本 信息 ， 如 图 21-13 所 示 。 


快速 联系 我 们 


Tel 





图 21-13 联系 我 们 


21.8.1 制作 联系 我 们 部 分 的 结构 


联系 我 们 部 分 主要 放置 公司 的 联系 信息 ， 包 括 电话 、 传 真 、E-Mail 等 文字 ， 插 入 在 一 
个 <div> 中 ， 其 HTML 结构 如 下 。 

<div id="templatemo contact"> 

<strong> 快 速 联系 我 们 <br /></strong> 

Tel: 001-000-1000<br /> 

Fax: 002-000-2000<br /> 

Email: webmaster@xxx.com</div> 


21.8.2 ”定义 联系 我 们 内 容 的 样式 


下 面 定义 联系 我 们 的 样式 ， 定 义 了 templatemo_contact 容器 的 宽度 为 200px， 高 度 为 
96px， 以 及 背景 图 片 、 文 字 颜色 、 字 体 等 。 在 浏览 器 中 浏览 效果 如 图 21-14 所 示 。 








21-14 ”定义 联系 我 们 样式 


#templatemo contact { 
width: 200px; /* 设置 宽度 */ 
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height: 96px; /* 设置 高 度 */ 

background: url (images/templatemo contact.jpg) no-repeat; /* 设 置 背 景 */ 
Color: ffE> /* 设置 文字 颜色 */ 

padding-left: 29px; /* 设置 左 侧 内 边 距 */ 

padding-top: 15px; /* 设置 项 部 内 边 距 */ 

font-family: "宋体 "; ”/* 设置 字体 */ 


21.9 制作 公司 介绍 部 分 


公司 介绍 部 分 主要 是 公司 的 介绍 文字 信息 ， 通 过 这 部 分 ， 浏 览 者 可 以 大 致 了 解 公司 基 


本 信息 。 


21.9.1 


公司 介绍 部 分 主要 包括 文字 信息 ， 制 作 比较 简单 ， 主 要 包括 一 个 <h1> 的 标题 信息 和 正 
文 文字 ， 插 入 在 一 个 <div> 中 ， 这 部 分 都 放置 在 templatemo right_ column 内 ， 其 HTML 结 
构 如 下 。 


<di 


制作 公司 介绍 部 分 结构 


V id="templatemo right column"> 


<div class="innertube"> 

<h1> 公 司 介绍 </h1> 

<p> 度 假 村 拥有 套房 、 标 准 间 百 余 套 , 独 体 别墅 6 栋 , 日 接待 能 力 350 余人 , 配 有 能 同时 容纳 350 
人 的 大 宴会 厅 、 大 小 包间 7 间 、 露 天 用 和 餐 的 河 边 长 廊 ，10 一 300 人 的 大 小 会 议 室 4 间 及 配套 娱乐 设 


施 ， 


及 绿色 无 公害 蔬菜 基地 ， 是 您 餐饮 、 住 宿 、 娱 乐 、 休 闲 、 会 议 、 景 区 游览 的 最 佳 去 处 。<br /> 


独特 的 纯 实 木 俄罗斯 乡村 别墅 建筑 风格 与 大 红 灯 笼 镶嵌 的 亭 台 楼 阁 , 成 为 一 道 亮 丽 的 风景 线 。 度假 
村 经 过 18 年 的 发 展 ， 现 已 成 为 黄金 海岸 旅游 规模 最 大 、 档 次 最 高 的 度假 村 。<br/> 


</p> 


</div> 
</div> 


21.9.2 ”定义 公司 介绍 部 分 的 样式 


下 面 定义 公司 介绍 部 分 的 样式 ， 由 于 右 侧 的 部 分 都 在 templatemo_right_column 内 ， 首 
先 来 定义 templatemo_right_column 的 样式 。 


#templatemo right column { 


} 


float: right; /* 设置 浮动 右 对 齐 */ 
width: 651px; /* 设置 宽度 */ 
padding-right: 20px; /* 设置 右 侧 内 边 距 */ 





这 是 


有 定义 了 templatemo_right_column 靠 右 浮动 ， 宽 度 为 651px， 右 侧 内 边 距 是 20px， 


在 浏览 器 中 浏览 ， 此 时 效果 如 图 21-15 所 示 ， 可 以 看 到 正文 部 分 的 内 容 都 靠 右 对 齐 了 。 
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ee- 公司 介绍 
Dn a 人 辽 了 导 fos0 因 和 厅 大 个- 


用 长 时， 10 ~、 Sm 吉大 直 亲 充 和 辣妹 庆 及 昌 色 天 基于， 时 上 信人 ， 失 下 
作 阳 ， 寺 议 。 到 





六 人 各 地 区 到 一作 人 全 区 E1340 和 民 ， 
大力 和 二 几 玫 用 和 大 、 知 站 和 R202 和 生 。 


图 21-15 定义 样式 
接 下 来 定义 公司 介绍 部 分 的 样式 ， 其 CSS 代码 如 下 ， 定 义 后 的 效果 如 图 21-16 所 示 。 


.innertube{ 
margin: 40px; /* 设置 外 边 距 */ 
margin-top: 0; 
margin-bottom: 10px; 
text-align: justify; /* 设置 两 端 对 齐 */ 
border-bottom: dotted 1px #782609; /* 设置 下 边框 的 样式 */ 


一 ee- 公司 介绍 
度假 村 拥有 套房 、 标 准 间 百 余 套 , 独 体 别墅 6 栋 , 日 接 竺 能力 350 余 人 , 配 有 能 同时 容纳 350 人 的 大 宾 会 厅 、 
大 小 包间 7 间 、 话 天 用 痪 的 河 边 长 廊 ，。 10 ~ 300 人 的 大 小 会 议 室 4 间 及 配套 娱乐 设施 ， 及 绿色 无 公害 蔬菜 基 
地 ， 是 您 效 饮 、 住 痊 、 娱 乐 、 休 闲 。 会 议 、 景 区 游 移 的 最 佳 去 处 。 


独特 的 纯 实 不 俄罗斯 乡村 别墅 建筑 风格 与 大 红 灯 竺 链 谨 的 部 台 楼 阁 , 成 为 一 道 亮丽 的 风景 线 。 度 假 村 经 过 
18 年 的 发 展 ， 现 已 成 为 黄金 海岸 旅游 规模 最 大 、 档 次 最 高 的 度假 村 。 


21-16 ”定义 公司 介绍 部 分 样式 


21.10 制作 图 片 展 示 和 新 闻 动 态 
图 片 展 示 和 新 闻 动 态 部 分 主要 展示 一 些 图 片 和 公司 的 新 闻 文 字 信息 。 
21.10.1 制作 页 面 结构 


这 部 分 的 页 面 制作 主要 是 插入 3 幅 图 片 和 一 些 新 闻 文字 信息 ， 这 些 主要 放 在 
templatemo_destination 中 ， 有 具体 代码 如 下 。 
<div id="templatemo destination"> 


<h2> 图 片 展 示 </h2> 
<p> 
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<img src="images/templatemo photol.jpg" alt="xxx.com" width="85" 
height="85"/> 
<img src="images/templatemo photo2.jpg" alt="xxx.com" width="85" 
height="85"/> 
<img src="images/templatemo photo3.jpg" alt="xx.com" width="85" 
height="85"/> 
</p> 
<h2> 新 闻 动 态 </h2> 
<p> 风 光 国 际 摄影 大 赛 征 稿 启事 <br /> 
国务 院 批准 &squot;5&middot;19&quot; 为 &squot; 中 国旅 游 日 sqauot; <br /> 
旅游 大 惠 民 大 酬宾 活动 景区 门票 优惠 表 <br /> 
宾馆 旅游 大 惠 民 大 酬宾 优惠 政策 <br /> 
</p> 
<p>&nbsp; </p> 
</div> 


21.10.2 ”定义 页 面 样式 





下 面 定 义 这 部 分 的 样式 ， 其 CSS 代码 如 下 。 


#templatemo destination { 


float: left; /* 设置 浮动 左 对 齐 */ 
padding: 10px 10px Opx 40px; /* 设置 内 边 距 */ 
width: 280px; /* 设置 宽度 */ 


border-right: dotted 1px #782609;  /* 设置 右边 框 的 样式 */ 
i 


这 里 定义 了 templatemo_destination 容器 浮动 左 对 齐 ， 宽 度 为 280px， 并 且 设 置 了 右边 





框 的 样式 以 区 别 右 边 的 内 容 部 分 。 效 果 如 图 21-17 所 示 。 
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图 片 展 示 1 





21-17 ”定义 样式 后 的 效果 








传 网 站 的 





21.11 制作 酒店 订购 部 分 


在 酒店 订购 部 分 ， 浏 览 者 可 以 填写 自己 的 姓名 、 电 话 、 入 住 日 期 、 离 开 日 期 等 ， 提 交 
己 的 订购 信息 。 
21.11.1 制作 页 面 结构 


这 部 分 主要 是 插入 一 个 订购 表单 ， 这 部 分 内 容 都 在 templatemo_search 内 ， 其 基本 结 
构 代 码 如 下 所 示 。 


<div id="templatemo search"> 




















<div class="search top"></div> 
<div class="sarch mid"> 
<form id="forml" name="forml" method="post" action=""> 
<table width="247"> 
<tr><td width="64"> 
<input type="radio" name="search" value="radio" id="search 0"/> 
<strong> 男 </strong></td> 
<td width="171"> 
<label> 
<input type="radio" name="search" value="radio" id="search 1"/> 
<strong> 女 </strong> 
</label></td> 
</tr> 
<tr> 
<td><strong> 姓 名 </strong></td> 
<td><label><input type="text"/></label></td> 
</tr> 
ER> 
<td><strong> 电 话 </strong></td> 
<td><label><input type="text" /></label></td> 
E> 
<tr> 
<td><strong> 入 住 日 期 </strong></td> 
<td><label> 
<input name="depart" type="text" id="depart" value="16-11-2020" size="6" /> 
</label></td> 
</tr> 
< 
<td><strong> 离 开 日 期 </strong></td> 
<td><input name="return" type="text" id="return" value="24-10-2020" 
size="6" /></td> 
< 
<tr> 
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<td>gnbsp;</td> 
<td><a href="#"> 
<img src="images/templatemo search button.jpg" width="78" height="28" 
border="0" /></a></td> 
<AEr> 
</table> 
</form> 
</div> 
<div class="search bot"></div> 
</div> 


21.11.2 ”定义 页 面 样式 


下 面 定 义 表 单元 素 的 CSS 样式 ， CSS 代码 如 下 ， 主 要 定义 表单 的 外 观 样 式 ， 在 浏览 
器 中 浏览 效果 如 图 21-18 所 示 。 


#templatemo search { 
float: right; /* 设置 浮动 右 对 齐 */ 
padding: 0px 30px 0px 0px; /* 设置 内 边 距 */ 
width: 262px; ”/* 设置 宽度 */ 
background: url (images/templatemo form-bg.jpg) repeat-y; /* 设置 背景 图 片 */ 
} 
.Search top { 
background: url (images/templatemo search.jpg) no-repeat; /* 设置 背景 图 片 */ 
width: 262px; ”/* 设置 宽度 */ 
height: 76px;  /* 设置 高 度 */ 
} 
.sarch mid { 
margin: Opx; /* 设置 外 边 距 */ 
padding-left: 10px; /* 设置 左 侧 内 边 距 */ 
padding-top: 0px; ”/* 设置 顶部 内 边 距 */ 
} 
.Search bot { 
background: url (images/templatemo search bot.jpg) no-repeat; 
/* 设置 背景 图 片 */ 
height: 11px; /* 设置 高 度 */ 
} 
#templatemo bot { 
float: left;  ”/* 设置 浮动 左 对 齐 */ 
height: 22px;  ”/* 设置 高 度 */ 
width: 877px;  ”/* 设置 宽度 */ 
background: Url (images/templatemo footer.jpg) no-repeat; 


/* 设置 背景 图 片 */ 
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DO 男 Ot 女 
让 名 

电话 

入 住 日 期 16-11-2 
离开 日 期 “24-10-2 


21-18 ”定义 页 面 样式 


21.12 制作 底部 版 权 部 分 


底部 版 权 部 分 内 容 比 较 简 单 ， 主 要 是 网 站 的 版 权 信息 文字 ， 主 要 放置 在 


templatemo_footer 内 ， 其 结构 如 下 。 


<div id="templatemo footer">Copyright 金色 海岸 旅游 有 限 公 司 </div> 


下 面 定义 底部 版 权 部 分 的 CSS 样式 ,其 CSS 代码 如 下 ,在 浏览 器 中 浏览 效果 如 图 21-19 


所 示 。 


#templatemo footert{ 
float: left; /* 设置 浮动 左 对 齐 */ 
width: 100%;  /* 设置 宽度 */ 
padding-top: 16px; ”/* 设置 顶部 内 边 距 */ 
height: 31lpx; /* 设置 高 度 */ 
color: #fff; /* 设置 文字 颜色 */ 
text-align: center; /* 设置 居中 对 齐 */ 


background: url (images/templatemo footer bg.jpg) repeat-x; /* 设置 背景 


图 用 7 

} 

#templatemo footer a { 
GOLlOP: 4EEES /* 设置 文字 颜色 */ 
font-weight: bold; /* 设置 加 粗 */ 





21-19 ”底部 版 权 部 分 


本 章 小 结 


在 企业 网 站 的 设计 中 ， 既 要 考虑 商业 性 ， 又 要 考虑 艺术 性 。 企 业 网 站 是 商 4 


性 和 艺术 








性 的 结合 ， 同 时 也 是 企业 文化 的 载体 ， 通 过 视觉 的 元 素 ， 承 接 企业 的 文化 和 企 ] 








的 品牌 。 
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在 CSS 布局 设计 中 , 除了 界面 设计 稿 之 外 , 我 们 需要 在 设计 





上 的 可 


> 366 














性 ， 但 是 这 并 不 代表 CSS 布局 对 设计 具有 约束 与 局 





练 习 题 


使 用 CSS+DIV 布局 如 图 21-20 所 示 的 页 面 效 果 。 


[DJ= ie 人 si[erel 





的 传播 媒体 更 好 、 更 直观 地 展 


网 站 中 尤为 重要 。 在 传统 网 站 


好 的 网 站 设计 ， 有 助 于 企业 树立 好 的 社会 形象 ， 也 能 比 其 他 
示 企 业 的 产品 和 服务 。 
界面 设计 是 网 站 设计 中 最 重要 的 环节 ， 而 在 CSS 布局 的 
设计 中 , 我 们 往往 根据 网 站 内 容 规划 提出 界面 设计 稿 ,并 根据 设计 稿 进行 网 页 代码 的 实现 。 








更 进一步 考虑 后 期 CSS 布局 
限 。 


2 
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